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18 Enchantingly Interactive 
Sites Worth Exploring 


Some sites look good and some sites function well, but there are a 
select few that do both with an extra sense of magic. 


These sites engage us on a deeper level, command our attention and 
take root in our imagination. They draw us into their world and make 
us forget our own - even if just for a moment. 



i 

THE FAST AND A 

THE CURIOUS 

cro-nlg digital ncpcrlcncra, visual W?nth*5 and gmtHlgnal 
connections fcurtwwn brands and people. 


Photo credit: Dunckelfeld via CSS Design Awards 
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Interactivity and enjoyment feed one another. In his book The Social 
Animal, psychologist Eliot Aronson explains that, when performing 
a task, a person is likely to justify the action in their head. This can 
easily lead into a self-fulfilling prophecy of the user enjoying any 
given site that they invest even a small amount of time into. 

Interactivity does not always need to be about interactions - emotion¬ 
ally engaging content like videos or poignant visuals can achieve the 
same results. In this case, simply watching and/or reflecting on the 
content is the user’s role in the interaction. As described in Interac¬ 
tion Design Best Practices, this experience is just as immersive - as 
anyone who’s ever seen a movie can tell you - and forms the same 
connection. 

We’ve compiled a list of examples that represent the magical quality 
of good interaction design. 

For a more detailed analysis of how to design interactivity and its best 
practices, as well as the techniques behind 9 other modern design 
trends, check out the free e-book Web Design Book of Trends 2015-2016. 

1. KFC: Colonel Sanders 

We’ll start with a familiar name, KFC. This satellite site celebrates 
the life of their founder and mascot Colonel Sanders in a variety 
of different ways, including written history, oral history, music, 
videos, interactive maps, and even online games. 
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Photo credit: KFC: Colonel Sanders via awwwards 


The entire site is joined through animation, with transitions 
between each area, starting with the site’s introduction. Inter¬ 
activity is immediate, as hovering over the six initial choices 
creates movement (not to mention signifies to the user that these 
elements are interactive). 



Kfrrtuckij fried thicken 

■HM 

COLONEL 



Photo credit: KFC: Colonel Sanders 
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The result is a site that’s fun to use, both in the content, and in 
seeing what will come next. By the end of the experience, users 
will know a lot more about Col. Sanders than they ever intended. 


AirBnB 

The popular travel site is a perfect example of interactivity with¬ 
out many real interactions: their video background is engaging 
enough. AirBnB depicts the magic in the everyday moments 
experienced when traveling, such as being woken by an excited 
child (above) 



Photo credit: AirBnB 


Much like a well-made film, these videos establish an emotional 
connection with the user. Aside from being fun to watch, the 
looping videos also serve the site’s business purposes: they es¬ 
tablish some personal context around the service provided, and 
get the user excited about going on vacation. 
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Photo credit: Lderepenger Quiz 


3. Laerepenger Quiz 

While not as well-known as the first two examples, the Laerepenger 
Quiz nonetheless has a commendable grasp on interactivity. 

Right from the start, the site features a catchy value statement 
and only one main call-to-action, focusing the user’s options. 
The value statement is key: aside from explaining what the site 
is about, it’s phrased in a way to generate interest - most people 
are naturally curious about how much they know about money, 
and would like tips on saving it. Notice which words are in bright 
orange. 



Photo credit: Leerepenger Quiz 
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As soon as the call-to-action is clicked, the site asks the user sim¬ 
ple questions: name, sex, age, and location. While slightly boring, 
these questions are small enough that they don’t dissuade the user 
from continuing (the progress bar at the bottom removes more 
worry). The answering of the questions personalizes the quiz, 
generates demographic data, and deepens the user’s investment. 


Draw a circle around your answer 


© 


o 


Quit 



Photo credit: Lserepenger Quiz 


Moreover, the site uses a more complex, and more fun, variation 
of answering. Circling the choice with the cursor involves more 
thought and interaction than simply clicking on it. This subtle 
difference nonetheless increases participation. 
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Photo credit: Chanel: Cafe Society 


4. Chanel: Cafe Society 

Chanel certainly knows how to create an atmosphere with their 
Cafe Society site. They combine video, still images, and poetical¬ 
ly written product descriptions - all united with an interactive 
scrolling navigation - to immerse the user in an environment 
rich with the elegance and fashionability the brand is known for. 


5. Space Needle 



Photo credit: Space Needle 


Scrolling in general is an excellent strategy for immersive in¬ 
teractions. The Seattle-centric site for the Space Needle shows 

















18 Enchantingly Interactive Sites Worth Exploring 14 


off stunning visuals and displays content with scroll-activated, 
animated boxes - a far more entertaining method than simply 
listing facts about the city. Like we described in the free e-book 
Web Design Trends 2015-16 users aren’t normally accustomed 
to scrolling upwards on a site to learn more, but the navigation 
pattern works for this specific context because it matches the 
on-screen journey. 

6. Nest 100 

An art project unlike any other, Nest features pictures of personal 
objects donated by real people and a short, written description 
of the sentimental significance of each object. This alone would 
be enough to establish emotional connections with users, but the 
interactive design takes the experience to the next level. 



Photo credit: Nest 


Remember that this site is designed for art enthusiasts who 
probably appreciate a more avant-garde approach to interface 
design. The design works in this context, but definitely wouldn’t 
be suitable for a corporate site or ecommerce site. 
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Users can preview descriptions by hovering over stars, which 
reveal enticing descriptions such as “The most depressing thing...” 
or “I was nearly divorced because...” These curiosity-provoking 
statements lead to a zoomed in cluster of stars, with instructions 
for the user to “connect the dots” with their cursor to display the 
full object and story. 





• 

Reveal the hidden souls 

00% ACHIEVED 




1 zoom out | 
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"The most depressing thing... " 
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ABOUT THE PROJECT ABflUT THE PEOPLE 'CONTACT ORE 


* f 

Donate an object 

Photo credit: Nest 


The percentage of objects seen (with the word “achieved” to 
frame it as an accomplishment) give extra incentive to fully ex¬ 
plore the site. 
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Photo credit: Beotbox Academy 


7. Beatbox Academy 

Simple and straightforward, some sites like Beatbox Academy 
simply offer online games and tools to hold their users’ attentions. 
You can’t really show off the fun of beatboxing in a static format, 
so the beatboxing soundboard is a clever device to try out a few 
techniques. In doing so, they’ll more likely want to learn more 
and browse the site’s instructional products. 

8. Aquatic Macroinvertebrate Collection 

Education facilities, too, understand the value of engaging the 
learner in increasing both memorability and enjoyment. In the 
case of the Aquatic Macroinvertebrate Collection, users can ex¬ 
amine lesser-known species by zooming in and out of various 
body parts and reading the descriptions. 
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milW Tirol 


Photo credit: Aquatic Macroinvertebrate Collection 


The effects themselves aren’t groundbreaking, but they definitely 
create the wonder of exploring something new and exciting. Nev¬ 
er forget that it’s not about the best design, but the right design. 


. Do You Know YouTube from A to Z? 



Photo credit: Do You Know YouTube from A to Z? 

Celebrating YouTube’s 10th Anniversary, this quiz uses a unique 
interface to encourage deeper immersion than other, more basic 
online quizzes. Going beyond clicking on the right word, users 
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must drag and drop cute icons representing the answers into the 
“drop zone.” This system allows for creative and fun use of icons 
(instead of common text), and entices more user involvement 
with a drag-and-drop system. 

Additionally, the entire site is rich with superb animation. The 
answer choices all shift and “dance,” creating visual delight 
while the user thinks on their answer. In between questions, the 
background expands and contracts, distracting from and thus 
easing the loading time. It’s a clever technique that we described 
in greater detail in Web Design Trends 2015-16. 
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Additional Examples 

1. Cinderella: Past Midnight 


0 1 Cinderella 

^ htt MiAiiihl 



Though she 
wasn’t royal, to her 
parents £he was 


submit 

your 

po^t 



Photo credit: Cinderella: Past Midnight 


2. The Happy Forecast 



Photo credit: The Happy Forecast 
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3. Mammut: Project 360 



O 7fl14 Mamrmil Sfmrta Rrmip flata Pmtflrtinfi L final MrVf.fi firm rant 


SOLVAY HUT 


The solvay Hut was inaugurated in 1917 and can 
arccrnmoriafa ip paopi* tor smflopanry bJuniiacfeing. Them 
is a difficult passage nearby, which hag lad to many 
accidents particularly during the descent. 


In) Dagnaa of difficulty: only sarvag fa an ftm«Qeocy 
bivouac 


: Conditions: room for approx. 10 mounlai neera 


Photo credit: Mammut: Project 360 


4. Make Your Money Matter 



Photo credit: Make Your Money Matter via awwwards 
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5. House of Borel 



Photo credit: House of Borel via awwwards 


6. Inside Abbey Road (by Google) 



Photo credit: Google via awwwards 
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7. Bugaboo 



Photo credit: https://www.bugaboo.com/via awwwards 


8. Beoplay 


IKJixav Audio Headphones All Products The Journal * cast 



si 


YOU CHOOSE WHEN 
YOU WANT TO LISTEN 
IN SILENCE OR LET 
THE CITY IN 



i 


Photo credit: http://www.beopiay.com/products/beopiayhMvideo via awwwards 
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9. Coin 



Photo credit: Coin 


A main goal for any website (or movie, or book, or any piece of media, 
for that matter) is to establish a connection with the user... and inter¬ 
active design is one of the most reliable routes there. The difference 
between low and high interactivity may seem like only a few extra 
clicks, but the effects on the mind are much greater. 

The extra emotional investment makes the difference between using 
a website, and experiencing one. 
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Design Tips: Animations in UXPin 

You can add a dose of interaction for users to enjoy in your prototypes 
in UXPin. It’s easy, once you get the hang of it. 


In addition to making elements appear on tap or hover, advanced 
animations let you move, expand or color a series of components at 
once. Start by deciding what you want to do. In this case, we’ll make 
a button expand to fill the screen and, with another tap, zoom back 
to its original state. 



Above, the top right highlighted button will expand when tapped, 
and the bottom left button will collapse it again. 

Advanced animations support up to four steps, plus the original state, 
for you to use. By default there’s only one - indicated by the dark 
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button below. Any changes you make to the prototype on a step will 
be what changes when users act (tap, hover, etc). 



One caveat: You can’t create new elements while creating an ad¬ 
vanced animation. They must exist before hand, though they don’t 
have to be visible. In this case all of the buttons already exist. In this 
step we’ve expanded the button to fill the screen, removed its round 
corners, and darkened the “collapse” button to make it easy to see. 



From here we create another advanced animation - yes, you can add 
an advanced within an advanced - to the darkened button. Notice 
that when tapped in the prototype, the element(s) that the button 
effects become highlighted. 
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RECENTLY CREATED 

- On Click (Tap) goto page 

- On Hover next state 

- On Click (Tap) toggle 


The first animation expands a button, and the second restores it again. 
Two quick steps to adding interactions to a prototype that give users 
a sense of control that helps emotionally bind them to the app. It’s 
that extra sense of magic that do more than look good. 


Feel free to try it yourself. 













25 Mesmerizing Minimalist 
Sites for Inspiration 


It’s an ageless principle that nowadays designers are coming to un¬ 
derstand: sometimes less is more. 

With the rise of mobile and the complications of responsive design, 
a re-emergence of minimalism is taking over the digital landscape. 
A style well-known in art history since the Post-WWII era, minimalism 
brings additional benefits to web design with faster loading times 
and better compatibility between screen sizes. The simplicity and 
low-maintenance just seem attuned to mobile browsing, without 
harming the desktop experience. 



Photo credit: SoundCitvProiect via gwwwards 
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It helps to understand the technique if we distinguish the minimal¬ 
ist philosophy from the minimalist aesthetic, although both can be 
applied to design. 

The minimalist philosophy centers on the idea that you must design 
around the content. Start with rough content, then build just enough 
interface for users to easily identify and navigate towards their goal. 
This principle applies to UI items as well - social media links, ads, 
and questionable widgets will only water down your most important 
elements. 

As for the minimalist aesthetic, it is the visual representation of the 
philosophy. Minimalism uses a lot of white space, which can attract 
or repel user attention depending on how it’s used. But don’t confuse 
that with boring. You must choose your layouts with care, or else the 
lack of elements will come across as dull instead of elegant. 

There’s no shortage of minimalist sites on the web today, and the 
reason is practicality rather than merely following a trend. Below 
we’ve collected 25 samples of our favorite minimalist sites to inspire 
you to do more by doing less. 

If you’d like to learn the techniques behind 9 other modern design 
trends (complete with 166 hand-picked examples), check out the free 
e-book Web Design Book of Trends 2015-2016. 


25 Mesmerizing Minimalist Sites for Inspiration 29 


1. Apple: iPad mini 3 
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Photo credit: Apple 


Let’s start with Apple, who are no strangers to minimalism. Their 
page for the iPad mini 3 uses lots of white space (literally white, 
too) to draw attention to the product’s sleek design, and nothing 
else. At the same time, the clear navigation bar at the top (which 
also features an abundance of space) allows the user to get around 
easy without taking up space. 
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2. Bruno Triplet 



Photo credit: Bruno Triplet 


If we had to choose one example of a minimalist site, it would 
be Bruno Triplet. Only two interactive elements distract from 
the hero image, and one is the hamburger menu - a minimalist 
site’s best friend in cutting down elements. Minimalism is espe¬ 
cially appropriate for this site: as a fabric designer, the texture 
of their product is crucial, which is more prominent if the photo 
is center-stage. The elegance doesn’t hurt the brand, either. 

3. ETQ. 


E T Q . 





Photo credit: ETQ. 

The lack of borders around the product pictures frees up a lot of 
space for a more casual visual flow. The corners are occupied 
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with the essential interface functions, freeing up the majority of 
the screen for the product. 


4. Callens 


CALLENS 



Photo credit: Callens 


As you’ll soon see with the rest of our examples, minimalism is 
a preferred choice for fashion and other luxury item sites. The 
style inherently gives an air of elegance and sophistication that 
lends itself to certain industries more than others. 

5. Beatbox Academy 


HOME 

ABOUT 

ORDER 

HISTORY 

STORY 
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Photo credit: Beatbox Academy 


The interactive online drumset is a promotional aid for the 
Beatbox Academy. While the overall experience is quite fun and 
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engaging, we would tweak the site by allowing for scroll (rather 
than forcing users to navigate the arrows). 

6. Derwent & Tamar Chambers 



Photo credit: Derwent & Tamar Chambers 


The elegance of minimalism can also be converted into profes¬ 
sionalism, as the attorneys of Derwent & Tamar Chambers show. 

7. The Outpost 


Q 


Our network 
is growing 


Photo credit: The Outpost 

The Outpost features dramatic typography, an integral part of 
minimalism. With limited elements, the designer must take ad- 
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vantage of each one to keep the site exciting - and since words 
are almost always one of the final elements, interesting and at¬ 
tention-grabbing typography is a useful tool. 

8. Leen Heyne 



Photo credit: Leen Heyne 


For Leen Heyne, the monochrome logo and company tag com¬ 
petes with the gold and sparkling gems of the jewelry Both are 
surrounded by an expanse of white space, making it a safe bet 
the user’s eyes will go back-and-forth between the two. 

9. Velvet Hammer 



Photo credit: Velvet Hammer 


Velvet Hammer demonstrates the value of composition in min¬ 
imalism. The two dominating visuals are poised symmetrically 
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against each other, all four corners are occupied, the entire scene 
is framed by a thick black border, and thin lines bisect the ver¬ 
tical and horizontal halves. At the center of the screen - though 
not the composition - is the brand name. 

10. We Ain’t Plastic 


/ 

WE AIN'T PLASTIC 
/ 



Photo credit: We Ain’t Plastic 

Another visual tactic used to keep minimalist designs interesting 
is contrast. For example, We Ain’t Plastic creates a stark differ¬ 
ence in size between the central image and the top text and icons. 
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11. Carlo Barberis 


cB 
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Photo credit: Carlo Barberis 


The Italian jewelers Carlo Barberis take advantage of the high- 
end attributes of minimalism, with little more than a hero image 
on each screen (and more information on clicks). 


12. Squarespace 





Create a 
beautiful 
website. 


Photo credit: Squarespace 


This screenshot from Squarespace illustrates the idea of one main 
point per screen. Squarespace explains everything they need in 
screen-by-screen bites, or group together relevant blurbs on the 


same screen. 
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13. Mikiya Kobayashi 
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Photo credit: Mikiya Kobayashi 


Few know minimalism better than the Japanese. Product designer 
Mikiya Kobayashi features only his brand name and a “scroll” call- 
to-action so that the main focus is the intricacies of the products. 


14. Nua Bikes 



Photo credit: Nua Bikes 

Nua Bikes is deceptively minimalist, because there are actually 
a lot of elements on the screen. However, by condensing the text 
and maximizing the white space, they are able to draw attention 
to their product, the bike. 
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15. Elite 



Photo credit: Elite 


The modeling agency Elite takes minimalist navigation to its ex¬ 
treme, with the focus on only two main pathways, and all others 
tucked into a hamburger menu. 

16. Chateau d’Yquem 



Photo credit: Chateau d’Yquem 


The winemakers Chateau d’Yquem combine minimalism and 
compartmentalization. Each compartment follows the minimalist 
philosophy with only a few elements revolving around one cen¬ 
tral concept. Size and location give the compartments a visual 
hierarchy when combined. 
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17. Bulgari 



Photo credit: Bulgari 


Bulgari is another company that seeks creative means to keep 
their site interesting with a minimal appearance: their side-to-side 
scrolling operates with an ingenuitive page-turning animation, 
not to mention the quality of the hero photos themselves. 


18. Sendamessage.to 



Photo credit: Sendamessage.to 


Amusing if not inane, Sendamessage.to lets people customize 
messages to friends backed with a hand gesture. The barren 
black background adds power to the hand image and the bold 
white letters of the message. 
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19. Maaemo 


Bock a table 


M^EMO 


Photo credit: Maaemo 

The site for Michelin-rated Maaemo uses minimalism to make 
this Norwegian restaurant seem high-class and rich with history. 
The visual treatment is perfect for storytelling, which the site 
certainly demonstrates with its HD photos that let users see the 
magic behind the cuisine. 

20. Ex Machina: Ava 
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Photo credit: Ava 

The black-and-white color scheme and conformity of typography 
keep the focus on the text - an interactive conversation with the 
robot Ava - except where red flourishes highlight. 
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21. WXG 2015 Conference 



Speakers 

Schedule 

Sponsors Location 

Contact Buy Tickets 

Q Live, Guildford 

25.09.15 


WXG - a one-day conference dedicated to creating 
web & digital experiences. 



See the speakers 1 


Photo credit: WXG 2015 Conference 


The site for the WXG 2015 Conference is fundamentally minimal¬ 
ist. The slightly faded X logo is the only thing to distract from the 
plain text against an empty black background. 

22. Facebook: Paper 



Photo credit: Facebook 


The site for Facebook’s Paper app has a layout that’s so common, 
it could be a trend on its own: hero image of product in real 
context as a background, punctuated with a value statement 
and call-to-action, plus a simplified navigation menu at the top. 
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23. Symbolset 


Symbolset Icons Blog Gallery Sign in 


Click below to type 


□ and Q optimized 



Photo credit: Symbolset 

Symbolset attracts attention to the interactive area in the middle 
by minimizing the competing elements and adding a brightly 
colored background. 

24. Lapka 



Photo credit: Lapka 


As an ecommerce site outside of the high-end industries, Lapka 
takes a risk with minimalism - however, it pays off with the site’s 
unique feel and aesthetic. 














25 Mesmerizing Minimalist Sites for Inspiration 42 


25. NTN 


collection info stockists shop 



Photo credit: NTN 

We’ll end with a site that’s traditionally minimal. NTN has the 
abundant white space, personality-infused typography, and re¬ 
duced number of elements that the minimalist style is known for. 

Just as with painting and photography, web design can also enjoy 
the benefits of the minimalist style. Even as technology advances 
such that devices will be able to handle more elements, the core 
advantages of a simplistic and minimally distracting interface 
will ensure that the style will remain ingrained in web design 
for years to come. 
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Design Tips: Minimal Elements in UXPin 

UXPin has more than 900 pre-built elements for you to create quick, 
thorough prototypes. If minimal is your look, we have you covered. 
Take samples from our icon set, for example: 
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Pretty simple. But they can get simpler. UXPin also includes filled 
icons - solid shapes - from FontAwesome: 
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Still too complicated? Try these primitive-based, Google-Material- 
-esque buttons and icons from our Bootstrap library: 
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DEFAULT BUTTON 


Info 


Danger 
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■ 

Default 
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MINI BUTTON 


And if you need something simple - really simple - you can create 
your own elements based on basic, geometric shapes. 


It all comes down to the basic principle that web designers are learn¬ 
ing fast: sometimes less is more. 


Design clean interfaces in UXPin (free trial) 














25 Clever Card Ul Sites 


Yet again, the rise of mobile users is affecting web design trends, and 
the recent popularity of cards UI is no accident. 

Cards interfaces are a way of organizing content into separate, bite- 
sized bits of information. Each card centers around only one concept, 
with elements such as title, images, or descriptions relating only to 
that concept. Cards essentially act as clickable snapshots. 

Google 

Technology company 

Google is an American multinational technology 
company specializing in Internet-related 
services and products. These include online 
advertising technologies, search, cloud 
computing, and software,, Wikipedia 

Designated CEO: Suudar Pichai 
CEO: Larry Page 

Stock price: COOG (NASDAQ) $312.48 -34.35 (-5.31%) 

Aug £1,4:00 PM EOT - Disclaimer 

Founded: September 4 : 1999, Menlo Park, California. United States 
Headquarters: Mountain View, CA, United States of America 
Subsidiaries: YouTube, Nest Labs, Sorryza, FeedBumer, more 
Founders: Larry Page, Sergey Brin 

Profiles 

13 □ □ 03 El 

Facebook Twitter YouTube Linkedln Google+ 

Feedback 



Photo credit: Google search for “Google 
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Organizing a site UI through cards solves the paradox of offering your 
users more content without overburdening them with choices. By 
simplifying the navigation, they make browsing easier, which many 
ecommerce sites have already picked up on. They facilitate linking 
to aggregated content from external sites, not to mention making the 
content itself easier to share on external sites. 

For mobile, cards UI offer even more practical advantages. The cards 
themselves become buttons on a screens with gesture controls, and 
users intuitively understand this process without instructions. More¬ 
over, the card layout easily rearranges itself to fit any screen size, 
making it a dream for responsive design. 

But implementing cards is not always as simple as it seems. Below 
we show 25 fantastic examples of card UI, and explain what they do 
right so you can do it, too. 
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1. Google Now 



Photo credit: https://www.google.com/landing/now/ttcards 


Google Now makes full use of the card UI’s advantages. Personal¬ 
ized information a user needs to know every day, from weather 
to daily news, along with useful apps such as Spotify, are each 
given their own card. Having all this information readily avail¬ 
able on a single screen provides an obvious benefit to the user, 
while listing it out in another format would be too much. 


2. Pinterest 

I = ’ Q MaH 




To my dog 


1 M Hitf Hit ul Hi mi pa tail fittt 

I will mt! t n fH i* i ilttar Hi luw 

IfiiUW Ht jtH itirvfi 

I «iI1 inv let lifrt 
I mil R>tEr dt-^n yiuji[(e)d 
K* Kill lluw fu ritfl £1 lliid 

IF ttn lint nsa I Mil bt lh*re it Mi jm 
fetwif I Ian tw iiri p jr? FAKillf 



Photo credit: https://www.pinterest.com/ 


One of the first and the best, Pinterest helped push the card 
format into the mainstream. In order to focus attention on the 
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image, each card has only the information needed - source, title, 
brief description (typically under 3 lines) and author. They also 
introduce a powerful card UI tool: hover controls. 


H from Etsy 

Horseshoe cowboy by the fire 

Horseshoe cowboy by the fire by 
American Metal Art on Etsy, $39.99 

O Jim McClendon 

Projects to Try 

Photo credit: https://www.pinterest.com/ 

Only showing the controls on hover frees up the space to place 
more emphasis on the picture, and keeps the screen clear of too 
many minute and unnecessary buttons for each card. This en¬ 
hances browsing, for a user will hover over any card they want 
to interact with anyway. 



<a 


Loam more at etsy.com 


■ from Etsy 

Horseshoe cowboy by the fire 

Horseshoe cowboy by the fire by 
American Metal Art on Etsy, $39.99 

O Jim McClendon 

Projects to Try 
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Instagram 



Q W m 16:50 

* \ 

capellastlucia 

Id 



O Q 


* 29 likes 


capellastlucia (Eprosie Ion doner of The Londoner all 
set for her Chocolate Spa experience! The perfect 
time to be smothered in St. Lucian chocolate is 




* a 


Q 1 


Photo credit: https://instagram.com/ 


The more current predecessor of Pinterest, Instagram modifies 
the approach to mobile devices. Filling an entire phone-sized 
screen (more or less) with a single card emphasizes the picture, 
the main content of the app, while still allowing easy browsing. 
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Q 

O '* ■ 16:51 


□ 

capellastljcia 

5d 



Q 


* GO likes 

capdlastlucia Is il any wonder why American 
Novelist James A. Mieheiier described Morisot Bay 
as 'The mostljeSMltfMlljay in the Caribbean." 
Strove frsllucia ftwanc-crlusl flovetravct 
itcspellahalels Searibbean tlropbcs #lropteal 
ttvieits.iinllne a JJsaintluda Jwestind iaa M island 
^island life fresort life »lovelife ^Caribbean life 
flvisitsllucia ^Caribbean island Smangatbay 
Pbirdseye fftravelphotography 
View all 9 comments 
eapdlattewise wotdi! 

alex.l>fatid ©miranda_rrahen lei's go! 

uevinginielands So niso! 

Add a commerti 



Photo credit: https://instagram.com/ 


This extra space is appreciated, since gesture controls can’t 
take advantage of hover controls like Pinterest. All the buttons, 
description, hashtags, and even comment previews are visible 
under the image. 


4. InkPeek 







Photo credit: http://www.inkpeek.com/ 





InkPeek showcases the work of lesser-known artists and allows 
users to buy prints or share the images. 
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Photo credit: http://www.inkpeek.com/ 


The site uses wide gutters (the space between cards) and hover 
details to generate plenty of white space, which draws out the 
visual elements of the images themselves. Hovering reveals the 
title and artist, while clicking... 



Photo credit: http://www.inkpeek.com/michael-wandelmaier/ruffled-feathers 


... opens a new page, with more information. 
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5. Dayafterday 


•I 


DRAKE 

muilc 


CHRISTINE AND THE QUEENS 

mLKlf 



XLRltR 

media 


0 



Acne 

A 

Studios 


ACNE STUDIOS ED SHEERAN 

UMila muilf 



Scroll down to explore 



A6NE50BEL 

music 


wallpaper' 1 : 



WALLPAPER MAGAZINE 

medio 


► M 


DID VIRGO 

Summer Mix M15 1 


Photo credit: https://dayafterday.co/ 


A site like Dayafterday couldn’t even exist without cards. Their 
service consolidates the near-infinite volume of online music, 
video, and art into a medium that allows for easy exploration. 



rodiy at 12:37 PM 


< m a 



S3 




Q RAKE AT MARQUEE NIGHTCLUB A OAT C... |~nCK ET "] 

Opp lit | PH Park. At I* nr*. GA u£ 

S*ji3i|Sal WhL PotuniJi Park. WashlngLun. D... 


* | Frl Aidriln fiiy L imln. Annin. TX, U5 

riN CITY LIMITS MUSIC FESTIVAL IMS I I 


d A * 

Miuslclan/band 

h.ttp://octoiwrivervawnxom 

Autni'y ■[Juki-' Cal .1 li.jni 11 1 r >11 ■ [h Lutn’r 34,1RRE in TdrCii'il 0, 
Ontario) i'. .1 rniT.jdr.Tn jirTnr, Mppp-r arid linger nignrd tn 
U11ivLTS.1l Rh'c cri£'. 5 ij l.'u hit h.i 1 . rflL-.isL-d I hri'i" min L,j[jl"., 

iWb's Room for Improvement MOr* Camebac < Season, 
and 20D9's critically acclaimed So far Gone., which Si 
considered cme of the best mlxtapes of 20D9. He Is In the 


Photo credit: https://dayafterday.co/drake 


Clicking on the icons takes you to the artist’s profile page, which 
has information, external links, samples, and even a social feed. 
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6. The New York Times 


= SECTIONS C\ SEARCH! 


US. INTE=INM10\4L P'T 


$!)eiNcUt Jlork ©tines 


Moncay, ^Kust 24,2DLS E Today's P*wr ■‘Viccc 74'F PAX 2.50% I 
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Amid Doubts 
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By BftVID JDLLYund BTQL COUCH 
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SLutiks iLTijSs Asia, arid Liumpc 
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Rolling Stone Moves Beyond the Fray 



The Opinion Fages 


An Opening for Dipdo macy 
Ln Syria 

By THE EDrT’DRlAI. 

BOuRD 

Tfefcffi are iignS ChaL 
Syria arid iLs haekCTfl 
a re finally reulu iriy. TJuaL uiily a 
political *Jutkm slave off 
further collapse and smp J 3 HS. 

- Kragnun.: A Moveable tUui 
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Come to Slew York. 
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OP-ED GONTOSnUH 

Flying Nannies Wen’* Fix 
Work 

Sy AHHE WEESaZJKJ 

N'-ew business perks for 
parents slum vt^re trapped JtT 
a i-vurld Lbat prizes LuLal 
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MORE H CRN Oh 

■ Erirtoriai: Greece and the 
Politics of Desperation 

■ Op-Ed: Why Aren'm India's 
Women Working? 



Watching 


Photo credit: http://www.nytimes.com/ 


Cards are the common system for periodical sites like The New 
York Times. Because of the wealth of content, it’s easier to orga¬ 
nize each story with a descriptive title, brief description, and 
occasionally a photograph. 


= CX Work! LAS, Foitics iM.Y. 5usine«: Opinion Tech Science HoaKh Sports Arts- Style Fane Travel Magazine T Magazine Real Estate 
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Beyond the Fray 
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opinion: Taking My 
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Frank. Druni: Gay and Marked for 
Death 
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Art Hidden Behind a 
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Photo credit: http://www.nytimes.com/ 
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The New York Times site uses traditional print newspaper borders 
instead of the standard gutter system to separate cards. Notice 
how they use typography to differentiate titles, descriptions, 
authors, and categories. 


7. ISSUU 


® issuu 


Upload About 


Plans Si Pricing 


Languages 


Create Account 


Sign In 


REALISE 



^ ilVE KR ► < 


REALISE - Issue 03 - 
April 2014 

University Of Liverpool 

Showcasing examples of 
research innovation and 
industry collaboration at the 
University of Liverpool 




IRPQ715 

Nashville Parent Magazine 
Rulherford Parent magazine 
July MIS 


realestateworld 

.com,au L_J 




EFCC, ICPC to be 
merged 

Vanguard Media Limited 








MRP catalog 2013 proof 

Successful Farming 



/ BROOKE EI/ERS 

TMWCOv’ 


Photo credit: http://issuu.com/ 


ISSUU takes the traditional approach to cards to show off its 
available publications. This display of picture, title, author, and 
description is most common. 
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READ NOW 


REALISE - Issue 03 - 
April 2014 

University Of Liverpool 

Showcasing examples of 
research innovation and 
industry collaboration at the 
University of Liverpool 


Photo credit: http://issuu.com/ 


The site even uses hover displays to make interaction more en¬ 
joyable. 
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8. Polyvore 


TRENDING NOW Most Eked styles from cur style community S£E 



Strik'd Blazers Camo Pants Labor Day Style 


Photo credit: http://www.polyvore.com/ 




Sites like Polyvore get even more mileage out of the cards UI by 
further separating cards into categories, such as “Trending Now” 
or “What to Wear.” The addition of a simple “See More” link can 
allow you to display only your best content to represent each 
section. 
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9. HOW arkitekter 


HOW arKitekter 


Home Wofk. About Contact 




truecaller 


May £015 

The mobile app co in party Tru eca Tie-,-' is expanding the if 
headquarters in amtral Stockholm and we're helping them 
agaii. 

www.truecallef.com 




Photo credit: http://www.howarkitekter.se/ 


The Swedish architectural firm HOW arkitekter takes a different 
approach to cards: oversizing. Their massive cards each take up 
almost half the screen, but by sacrificing options they place more 
prevalence on the message of each card. 
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10. J. Hornig 




Photo credit: http://www.jhornig.at/ 


Animation is crucial for providing immediate feedback for the 
card interfaces. Like many other card-based layouts, the Ger¬ 
man coffee site J. Hornig also features animations triggered by 
hovering. 



Photo credit: http://www.jhornig.at/ via Awwwards 


When a card is hovered over, the image is slightly zoomed in 
on, darkens, and the call-to-action “mehr lesen” (“read more”) 
appears with the lines above and below the words speeding in 
from the sides. 
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11. Etsy 


Shop Svclioni 

Sliop litune 47 rtums 
Scissor Lamps 4 
Pfiindflrrtfl 10 
Vintage Theater Lights 1 
Modern 26 
Industrial 3 


Shop Owner 


Jay Harris 

Ptsjwn fleach, CA, United 
Slates 

Wave a question? 

Qbfilact Itiu shuy uwriw. 

Need a custom order? 


Request Custom Order 


PhotoricStudio 

Handmade! Industrial &. Mudurri Lryhtiny 
m This ahe>p floraptit Flay Oft Oicds. 


| Search in this shop 


Search 


Sort by; Cuslom ~ ft 




Vlnlaga Stylo Adjustable Wall.., Modem Pendant Light Mkf,.. 

PhotonicStudio WJ50.00 lifj> PhotonicStudia ftlfjOOtMQ 



Photo credit: https://www.etsy.com/shop/PhotonicStudio 

As we mentioned above, the card UI is popular with ecommerce 
sites because it allows them to display their product range in a 
way that’s easy to browse. All the relevant details like name and 
price are displayed around the product image, with further details 
and options to buy available on the product page after clicking. 


Trending Items 

Explore shoppera' lop finds from around tie marketplace. 




Moduli Taolu Lump - Marble Bras... 5249.00 uku 



From PhowrUcSTudicn 
in California, United States 

***** 40 Reviews 


Photo credit: https://www.etsy.com/ 













Fo r mery \bs 
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Etsy takes this a step farther and groups their cards into smaller 
cards on their homepage. Each of these cards for a single seller 
features a “mini-card” for their most popular product and price, 
two other products and a link to more, and the seller’s informa¬ 
tion along with rating. 

12. Formerly Yes 

Products About Blog Sign In Bag 



Photo credit: http://www.formerlyyes.com/ via Awwwards 


Like other ecommerce sites, Formerly Yes recognizes the card 
UI’s advantages to sales. What sets them apart, though, is their 
commitment to minimalism. The incorporate the borderless card 
to save space, using white backgrounds in the product pictures, 
and show only the product name, maker, and price. 




Fofnrwrty Yss 
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Products About Blog 


View 



Black Porcelain Bowl From Aalto Vas 

Hasami Porcelain $24.00 littala 


Photo credit: http://www.formerlyyes.com/ via Awwwards 


Even the hover displays has only a single word. 


Products Ahoul RIno 


Black Porcelain Bowl 

Hasami Porcelain 


Sign In Bag 


$24.00 

Oesctiptiori 

Made in Japan from unglazed 
ptwflfilfiin with a TflKiLire and 
organic feel that is orncjoe to 

SiTft Small 



Details 


Add to t**g 


Photo credit: http://www.formerlyyes.com/ via Awwwards 


When clicked, a slightly more descriptive product cards drops 
down, with a much larger picture and the option to buy. 
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Additional Sites: 

1. YouTube 


YculiTTB 


Q 


LJplo.yH 0 || 


Hurnv Subscription# 


Recommended 



Faith Ho More King For A 
Day,., Fool Fur A Ufalimn [Fi .. 
byOuhuMw 

33,546 viewa ■ Anunlhs ayu 



Paul Rudd The best of 
EEoupuf & - Gag Raul 4 
by Movie Blooper e & Making of Q 

tlTjCBi viras ■ 1 nFjpflhogu 



Rick and Morty's Dan Harmon 
4 Justin ftuilaridi ■ ETC 

by ETC IWown 

76,663 mrws ■ 2 mill agu 



Roy: A Life Well Lived | Rick 
and Mar Ly Adult Swirn 
ay Aduli 5wtm Q 
230,071 vwvrx ■ 2 weeks nya 


Captain Levi Goes God Mode 
Shwnv [Attack On Than] 

b¥ C-GITALBEA7BQKX 
1,343^27 views ■ i i.H-Hrths uyj 



Cyanide 4 Happiness - All 
Classics Shorts 
by ShowTutieCl tan w(713 
4 1 1 ’6-2*11 ™wa L '£ months ooo 


Key 4 Penile - Severed Head 
Warriors 

by Comedy Cenlral S3 
113z233vmw 3 ■ 3 weeks a®p 


Key & Peele - Rap Album 
Confessions 

try Cwriedy Oil Dal O 
Z3B3.1W views * 2 weeks rwo 


Key 4 Peele prison skirt very 
funny! 

try L-jpnrryOa 

IJflKSSJ Views - Eycoraapo 


X Gan Give It To Va | Rick and 
Morty! Adult Swim 
by Adi/I SwwnO 
173JJMI views - 1 month ago 

Shown 


Photo credit: https://www.youtube.com/ 


2. Contently 


CARRIE COUSINS 

fl&Sf6ke. VA r aboiil.nr ■ wrrtec-puicon'cni y stir-i 

OQO I O 

Designer. Writer. Editor. 

Designer. W*iler, Editor. 

29S starics D 3SK shares 

A 77DK y.w-cTi T' UK ivrects 

jt I.3K ltHV3wcfs C m ik« 


296 stories for 15 publications 



P I ^ 


,9 V 



How to Start a Fashion 
Blog - Weebly.com 

Slatting a fashion blog rakes work, 
patience and dedication. Every fashion 
bfogger needs So find a unigue style and 
voice, tpnduct research, gather 
InTc+mation and figure out ways to 
crests I he t*f( e&rttewien idute 1* a 
successful site. The Id'owing lips will 
show yem how ijg stsn a fashion W&a 
from the ground up. 


157 2 . j. i 




Conversion Rate 
Optimization Tips for Your 
Website - Weebiy.com 

A great Image can help your wehslte, 
blog Or CmSrtn Starp capture attention 
and keep vtsttras engaged. However, It 
lakes more than Jusi expert 
photography So create great Images for 
your she. Fcfflpw these image 
optimization tips to ensure that your 
images impress- 

(YY) WHO 

S'Tarcs Twnerti Likin 



5 Business Blog Tips to 
Attract More Customers - 
Weebly.com 

5 Business B-pg Tips to Art'act More 
Cusipmets - we.,, 

cm j ° 

111 Sfram Tivcrb bka 


A..LI4 




How To Develop a Unique 
Brand Personal tty ■ 
Weebly.com 

Hpw Tp p^lop | Unique Brand 

Personahiy - WeEbly.... 


rwi too 


Photo credit: https://carriecousins.contently.com/ 
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3. Relevant Magazine 


RELEVANT 


SCtTFOUS MAGAZINE WMAST TKt W»P 




CCTMETT n W 


SUBSCRIBE 


THE LATEST 


* ALL EDOTiNT FEATURES ILHI'i MULtTMEtMA 


LtFi. 


SH ARC ooraa 



6 Things to Do When 
You Feel 
Overwhelmed 

God intended for us to have 
lives filled with peace, not 

BLEAflMOfflE 


TRENDING 


t 


FOLLOW US 


El o 0 


COD 

What Not to Say to 
] those Hurt By 
Church 


UFE 

Christian Women: 
9 Stop Waiting on 
Men 

(“ T^CM 


THE RELEVANT PODCAST 



Episode 439: The Brilliance 

April 24, 2015 0 PLAV NDVf 


ClhttfRI t SLICES SHARE ooEB 

Watch Barney Invade the Jurassic World' 
Trailer 

Well dons, Ellen. Though, nothing beats Jurassic Parks ghtf flrengefaBT ... 



UF6 

5 Practices We 
Need Back in Our 
Lives 

r iflu 

H£Jt CT ASaThV 

Rejecting Silence in 
Jj. the Face at 
injustice 

r 2,35-5 


VIEW WORE EPISODES 


STREAMING ON THE DROP 



Sun & Moon 

TTmtur 

i PiAV NOW 


UFE 

5 The'Good News 1 
About Sex 

v* 3 jBM 



For Every Curse 

dMeibusItHf 

®MAY NOW 


Photo credit: http://www.relevantmagazine.com/ 


4. Dribbble 



Photo credit: dribbble.com 
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5. Jetsetter 


Newport, Rhode Island __ _ _ 

Where Id nead7 ^nter destination or hotel 

§ Checkin 

§ Checkout 

SEARCH 


TODAY'S TOP SALES USA A CANADA MEXICO S CARIBBEAN CENTRAL <& SOUTH AMERICA EUROPE ASIA ELSEWHERE 



Photo credit: http://www.jetsetter.com/ 


6. UXPin Design Library 




Designing Better UX Wilh Ul The Guide to Interactive 

PdlLeins Wiiefidiniriy 

gnJitml 



Demystifying Delightful 
Intei action Design 




riot Design & Colors 


Photo credit: http://www.uxpin.com/knowledge.html 
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7. Vox 



Photo credit: http://www.vox.com/cards 


8. Upworthy 



HEALTH 

A town iin Massachusetts decided to stop arresting 
drug LjSArs„ ? months later,, hem's hnw it’s going 

Mb inoiiUTjMrt Open SciCLetj Foundaforis 


HEALTH 

New children's book that helps kids Fall asleep is 
now a Si hest-seller. 

Morgan Shnaff 


ENVIRONMENT 

Scientists on 3 continents now have evidence; 
Some Oh imps have entered the Stone Age. 

Eric March 


Fresh and worthy 





AUG 21 | HUMANITY AND CULTURE 

1C deep thing* about life l learned from taking preschooler* really 
seriously 

l nrti White 


ALJG ?1 | HUMANITY ANf! OllTI IHF 

See the beautifu l wed ding video of the man who was buried on the 
day he was supposed to get married. 

Thom [Xinrt 


AUG 211 HEALTH 

Matthew Perry gets candid on the most im portent factor in lig hting 
addiction. 

Robbie Couch 


Cat Upworthy delivered to you. Daily. 
Email 


By submitting abovo you agreo to th® Upworthy 
privacy policy . 


Most viewed this week 


HEALTH 


A town in Massachusetts decided to atop 
arresting drug users. 2 months later, here's 
how it's going. 


1 (TON UNITY 

5 iwwMWHi Open 5ucialy Foundations 


HUMANITY AND CULTURE 


Photo credit: http://www.upworthy.com/ 
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9. Digg 


digg HOME VIDEO READER 


SubscribeTo The Daily Oigg Sign In Q 



EXCEPT POP DJ ROQ.MEA 

Someday, Robots May Sava Or 
Destroy Us All — For Now, 
They're Still Kinda Dumb 

ICC Ct'lkctora W iil J -;,' - Technology 

IV: AuiiEiEivX.Lhrri'Fiiiniiij'.LiwsEiT ratnlfcxwHi pairlp 

us anymore! 



W6 Feel the Same wav 

Grizzly Dear Embraces Lazy 
Sunday, Decides To Just Roll 
Down Hill 

1,TD3 Video Aru mol: 



MIND 0 AMES 

The Most Dangerous Man In 
Football 


lAfc CSPN Lsng fteadi 

CtiiKKnUnd k»i« We sport, but the turtlw he steps 
away f rom the NFL, the more pointier diid damaging 
it seems. And if his views spread, the jsme may never 
be the same. 

* Digg ■ Save Cl 3-.acfbcok w Ivnlter 



TNI GOOD KIND Of FROSTED TIPS 


Relax And Watch This Frosting 
Machine Make You A Cake 

aui Video - TMhntHE© 

On the one Iband, wef re rrwsmeriflHf, On the other,, 



FINALES, FROM 0 HAND TO ELAND 

The Most Loved And Hated TV 
Series FInales 


1 □ 0- daily Iktf Data Viz 

A uisuafHiat*on at how rams regard the series t«n a !m of 
ova 1 M TV senio* for bellur or fut worse.. 



AWFUL 


ISIS Blows Up Ancient Temple 
At Syria's Palmyra Ruins 

ilk The WewVort Times - news 

Islamic State milita nts have detonated explosives 


Photo credit: http://digg.com/ 


10. Netflix 


QlToJes. Peopte. Genres 


a 


J Jerry ▼ 




The Walking Dead 


2010-2013 ] TVtWfl. | 4 Seasons 


Em the wake erf a zombie apocalypse, surwws 
hold on to llha hope of humanily by banding 
together to wage a fight for (Heir own survival. 
More Info 

Starring: Ardruw Lincoln, Steven Yeun 
Creator: Frank Darabont 


Ourtosl guts*for 
Jerry 

N& IfllffWtfliS | 


+ My List 
Recommend 


Photo credit: https://www.netflix.com 
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11. Behance 


B3 Projects - All Creative Fields - Featured = Worldwide - 




Photo credit: Behance 


12. PatternTap 





Stylo *■ 

Typa- 

is 

% 



* 

f 


I 


* 

** 

m 


Italrottcre ft cm falarcd 


Color * Dftufc* - g, 





FvmFiBim WwKI SteH*. 



Photo credit: PatternTap 
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13. Bezar 



Monday August 2U Do you know the way to Son Jose Jerry? 



Photo credit: Bezar 

You’ll notice that all of the above sites feature a large amount of 
content, necessitating a clever strategy for displaying it all without 
cluttering the screen. Hick’s law teaches that too many options 
creates cognitive load, however too few options hinders the us¬ 
er’s experience. Cards provide a happy medium - and in a way 
that allows a site to still be creative and showcase its personality. 


Design Tips: Making Your Own Cards 

Card-based designs are great for organizing information at a glance, 
and you can make your own card-based prototypes in UXPin with a 
few simple steps. In this tutorial we’ll create a product catalog. If you 
don’t have one already, get your free trial account and follow along. 
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1. Decide on content 

Before you do anything else, you need to decide what will go into 
each card. Ideally, each will contain the same types of informa¬ 
tion. In this example, each card will contain a title, image and a 
brief descriptive blurb. 

2. Decide on a grid 

Will the cards be the same size? Will they stack in a Pinterest-style 
“masonry” layout? Or will they flow horizontally? In this case 
we’ll go for a flexible masonry layout. 


3. Lay out a sample card 

Drag a box onto the canvas, followed by two text boxes and an 
image. Doing so will ensure that the card is the bottom-most layer. 
We’ll make the card 200 pixels square to start. 



Given our preference, we’d rather work with real sample con¬ 
tent. But if that’s not available to you, we suggest working with 
varying amounts of lorem ipsum. That’s key: Unless the size of 
your cards dictates their content, you should plan for different 
scenarios from way too short to way too long. 
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4. Arrange the elements 

Let’s get things in order. People are visual browsers, so we’ll 
make the image a priority. Second comes the larger title, followed 
by the text blurb. This is a standard pattern because a) it keeps 
things in order of increasing effort to read, and b) people have 
come to expect it. 


Libraries: 

# manage libraries 



Featured 

- | 




Igets library & 

j. 



ri ! 

D - 

0 ]. 


, Q : A* 

0 


Centered 

Pagination 

Checkbox 

fi : : : : : 

0 1 

0 1. 

i . 

Sample title 


a 

Lorem ipsum dolor sit 
a met, consectetur 
adipiscing elit. Aliquam 
at porttitor sem. 

Aliquam erat volutpat. 

Hotspot 

Image 

A : : 

Donee piacerat nisi 
magna, et faucibus arcu 
cond imen turn sed. 



O ]. 


In the above example, we’ve made the card white with a gray 
border to help it stand apart from the placeholder image. Notice 
that the card’s too small now. We’ll fix that next. 

5. Make variations 

Start by grouping each, then making two copies. 


0 —i 


Sample title 

Lorem ipsum dolor sit 
a mot, consectetur 
adipiscing elit. Aliquam 
at porttitor sem. 

Aliquam erat volutpat. 
Donee pi ace rat nisi 
mayna. et faucibus arcu 
condimcntum scd. 



Sample title 

Lorem ipsum dolor sit 
arnet, consectetur 
adipiscing elit. Aliquam 
at porttitor sem. 

Aliquam erat volutpat. 
Donee pi ace rat nisi 
mayna, et faucibus arcu 
condimcntum scd. 



Sample title 

Lorem ipsum dolbr sit 
amei, consectetur 
adipiscing elit. Aliquam 
at porttitor sem. 

Aliquam erat volutpat. 
Donee piacerat nist 
magna, et faucibus arcu 
condimcntum cod. 
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Then make each a different length. As you do so, expand each 
200px square card to fit. 


Sample title 
sample title 

Lorem ipsum dolor sit 
amct, conscctctiur 
adi piscing el it. Aliquam 
at porttitor sem. 

Aliquam erat volutpat. 
Donee plararat nisi 
magna, etfaucibuE arcu 
condimentum sad. 


Sample title 

Lorem ipsum dolor sit 
amct, consccictur 
adipiscing el it Aliquam 
at porttitor sen, 


Sample 

Lorem ipEum dolor sit 
amei, oonscoictor 
adipiscing ell Aliquam 
at porttitor sem, 

Aliquam erat volutpat. 
Donee placerat nisi 
magna, et faucibus arcu 
condimentum sed. 
Aliquam erat volutpat. 
Donee placerat nisi 
magna, et faucibus arcu 
condimentum sed. 


Three is an ideal number. At this point you can still solve prob¬ 
lems in typography and width, if you decide to change the style, 
while still evaluating its impact on different circumstances. For 
example, let’s say we want to add a clear call to action at the 
bottom of each card. We can also add placeholder photos - again, 
using a variety to account for different types of content. Better 
to do that now than when we have an grid full of them. 



Sample title 
sample title 

Lorem Ipsum dolor sli 
amct, consectetur 
adipiscing ©lit. Aliquam 
at porttitor sem. 

Aliquam erat volutpat. 
Donee placerat nisi 
magna, et faucibus arcu 
condimentum sed. 


Learn more 



Sample title 


Lorem ipsum dolor sit 
amet, conscctctur 
adipiscing elit. Aliquam 
at porttitor sem 


Learn more 



Sample 


Lorem ipsum dolor sit 
amct, conscctctur 
adipiscing elit. Aliquam 
at porttitor sem. 

Aliquam erat volutpat. 
Donee placerat nisi 
magna, et faucibus arcu 
condimentum sed. 
Aliquam erat volutpat. 
Donee placerat nisi 
magna, et faucibus arcu 
condimentum sed. 


Learn more 
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6. Replicate to simulate the design 

We have varying content. We have all the elements we need. Now 
it’s time to try the whole thing out. Duplicate each one several 
times, shuffling them around to experiment with what-if. For 
example, how will the design hold up with too many long cards 
in one place? 


-A- 

Sample title 
sample title 

I nrom Ipsum rtftlnr sir 
amot, conscctctur 
adipiscing elit. Aliquam 
hI pnritilnr sum 
Aliquam crat Yelutpat. 
Donee placerat nisi 
magna, er Taudbus a rcu 
condi mantum sad. 



Sample 


Lorem ipsum dolor sit 
□mot. conscctctur 
ad ipi sting eit. Aliquam 
,rT pnrttltnr sam 
AJlquam orat vdutpat. 
Donee placerat nisi 
magna, at faudbus arcu 
oordimcnlum sod. 
Aliquam ur al vulu IpaL. 
Donee placerat nisi 
magna , ct laucibus arcu 
t&ndirrieriiurn sud. 


Loarn rnur i: 



Sample title 


I nrern ipsum rkilnr sit 
amet, conscctctur 
adipiscing elit. Aliquam 

Hi |Hirttik>T HfMTI 


L ftarrv merit 



Sample title 

sample title 

Lorem ipsum dolor sir 
annet, conscctetur 
adipiscing elll Aliquam 
al porttitor sem. 

Aliquam anal volulpal. 
Donee placerat nisi 
magna. et laucibus aicu 
condimenlum sed. 




Sample 


I niFtrn ipsum dolor sir 
amet, conscctctur 
adipiscing Hit Aliquam 
h! jHirltilor SFtru 
Aliquant cral volulpal. 
Donee placerat nisi 
magna. eTTauclhxis amj 
condimenlum sad. 
Aliquam eral volulpal. 
nnneo piaowat nist 
magna, ct faucibus arcu 
condimenlum sed. 


Learn more 



Sample title 


Lorem ipsum dolor sit 
amet, consectetur 
adipiscing nllt Aliquam 
al portlitor sem. 


Loam moro 


Sample title 
sample title 

L nnam Ipsum dnlnr sit 
a met, conscctelur 
adipiscing elit. Aliquam 
at fHarllitrir shfii 
Aliquam orat volutpat, 
Donee placerat nisi 
magna, at faudbus arcu 
condimantum sed, 


morn 



Sample title 


Lorem ipsum dolor sit 
amet, ccnscclclur 
adipiscing elit. Aliquam 
at jvirltifnr sam 


Ltrm mart 


And there it is: A prototype card layout that gives stakeholders an 
idea of what to expect, even if things don’t go quite according to plan. 


Feel free to try it yourself. 
















31 Delightful Flat Design 2.0 
Sites for Inspiration 


Bigger. Better. More intricate details. These days, flat design has 
progressed into something a little less... flat. 

In an on-point description of the newest iteration, Ryan Allen calls it 
“Flat Design 2.0.” His article for Dapper Gentlemen lays out what flat 
design was before, what it is now, and even sheds some light on why. 
Flat design remains a popular technique today because its simplicity 
aids responsive design - but over the last few years has undergone 
some refreshing changes. 



Photo credit: Ryan Allen 
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As you can see in Ryan Allen’s fantastic illustration above, the most 
notable change between the original flat and flat 2.0 is the additional 
details. Highlights, gradient shadows, dropshadows, elements with 
more values. Flat design is no longer an antithesis of everything 
skeuomorphic. 

Many of the original features, however, remained unchanged. Flat 
2.0 still retains its minimalistic simplicity, though slightly less so. Its 
bright and fun use of color is still prominent. And its unadorned ty¬ 
pography aimed at legibility is still seen. 

But instead of talking about the differences, we’ll go ahead and show 
you. If you’d like to learn the techniques behind 9 other modern 
design trends (complete with 165 hand-picked examples), check out 
the free e-book Web Design Book of Trends 2015-2016. 
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1. Cybeer Bar 



Photo credit: Cybeer Bar 

Cybeer Bar is a great place to start: they stay true to the basic, 
simplistic style of flat design, but take it to an extreme with an 
intense layer of detail. The wood panel of the bar says it all - only 
two colors and clearly distinct, almost blocky shapes, but with 
meticulous application for elaborate detail. 

2. Christmas with Joy 



Photo credit: Christmas with Joy 


Christmas with Joy uses flat design illustrations to showcase cute¬ 
sy versions of popular Christmas characters around the world. 
Notice the smooth shapes and distinct shading. 









31 Delightful Flat Design 2.0 Sites for Inspiration 76 


3. Dropbox Guidelines 



Photo credit: Dropbox Guidelines 


The sketches on the Dropbox Guidelines site flirt with realism, 
but are still simple enough to be considered flat, especially when 
joined with the bright blues and reds, and the simple typography. 


4. 


450 GSM 


450 GSM 


Our clients come to us because 
we offer amazing quality print at 
unbeatable low prices. 

From business cards, letterheads and compliment ships to flyers, posters and roller 
barmens, al I prices include delivery and VAT'. 


start painting 



Photo credit: 450 GSM 


The 450 GSM site could still be considered as original flat design, 
if not for the slight shadow beneath the bird. Fun fact: this site 
was actually built with the Startup Design Framework, which 
makes it easy to create beautiful sites quickly. 
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5. Intercom 


InCfrf tQffl iferutnta- .-uiTiuirH hi.-iio 

Customer communication 
made simple 

lrtrflr™m it ruvi pined-■for your (lncirw hu-iin^tt m m and Inllctfl Hnvw livni 

ton™rin^irj«ii mid ieiid Cdnjclud imiiiftOtfi to wubiitu uivilors. a*vS umrs. of vxhji app. 



Photo credit: Intercom 


The bright blue background, stylistic icons, and unobtrusive ty¬ 
pography make Intercom a poster site for flat design. Notice the 
rounded edges on the icons, buttons, and boxes. 

6. Agency Survival Kit 



Photo credit: Agency Survival Kit 


While the minimalism and pastel red are typical of original flat, 
the texture of the book and mild shadows make Agency Survival 
Kit part of the 2.0 movement. 
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7. Hell‘o Baby 


Invrte family Adfltorxefii C.J»os« momems UseswvuM KHpitnJey MJ LOG hN 


Create an interactive 
album of your baby 





Photo credit: Heli’o Baby 


Despite the flashy font at the top, the color choices, rounded edges, 
and oversimplified icons are all classic flat elements. 

8. Helbak 



Vi leverer fragt frit i hele Danmark - 


Photo credit: Helbak 

Looking closely at the product pictures, you’ll notice a shadow 
effect over a pastel-colored background, adding flat elements to 
the site for this Scandinavian ceramist, whose work is already 
characteristic of flat design to begin with. 
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9. Paye Ton Caps 



Photo credit: Paye Ton Caps 


The graphics for this French online game are pure flat 2.0, with 
their homely style and obtuse shading. 


10. CSS Conference EU 


CSSCONF EU 

Berlin, September 2G, MlS 


INFO CALL FOR SPEAKERS SPONSORS TEAM BLOG 


Buy Tido&t 



Photo credit: CSS Conference EU 


The traditional flat color palette combines with some ornate 
details to make the CSS Conference EU site a representation of 
modern flat design. 
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11. Take It 



Photo credit: Take It 


Using layers, the site for the Take It app combines real photog¬ 
raphy with the flat style. Notice the city background done in the 
typical flat style. 

12. Google Santa Tracker 



Photo credit: Google Santa Tracker 


Flat design works well with Christmas themes, it appears. Google 
Santa Tracker proves that flat design isn’t always minimal - not 
only is the screen busy with individual elements, the constant 
animation of the snow and background vehicles make this a page 
that’s entertaining to watch. Notice the blurred out tree in the 
foreground to give a 3D effect, especially with the parallax scroll. 
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13. For Better Coffee 



Photo credit: For Better Coffee 


While lacking shading elements, the multitude of details and clear 
distinctions between colors allow this creative scrolling site to 
be classified as flat design 2.0. 

14. Dots 


»• 

T# 


GAMES ABOUT BLDG SUPPORT 


* TW#D#TS 

* 


Jam two brave dots as they traverse arctic tundras* navigate fiery 
jungles, and plunge the ocean depths. Two Dots is a modern - 
classic puzzle game where you simply connect colored dots to 
score points and complete objectives. Sharpen your slcilb across 

1S5+" levels while uncovering many exciting new features along 
the way. ► 

Available on: 



• AppStore piJ' * • ;r - y 

★ 



Photo credit: Dots 


The official site for the Dots games made a wise choice with flat 
design 2.0, as the style enhances its joyful gaming atmosphere 
and facilitates the site’s fun web animations. 
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15. Quotes Magazine 



Photo credit: Quotes Magazine 


The serif font and heavy texture, while not pure flat elements, 
give Quotes Magazine a more refined feel to enhance the bright 
colors and catchy visuals. 


16. Who Is This F*cking Bear? 


WHAT DO YOU FEEL LIKE DOING? 

On your first dcry as a bear you have a few activities to do. Choose wisely. 



Photo credit: Who Is This F*cking Bear? 


Who Is This F*cking Bear combines the conventional elements 
of flat design (rounded edges, basic shapes) with dreary colors 
(accented by the occasional orange flourish) and a high level of 
detail (take a close look at the bear’s fur). 
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17. Stash Flat Icons 




1. Animal* & Pets 



3, Awtars & ProfMwcm 


Photo credit: Stash Flat Icons 


A site done in flat design to promote flat design icons, Stash Flat 
Icons showcase bright colors and plain typography, not to men¬ 
tion the character style of icons in flat 2.0. 


18. Acapo 


0 0 


ARE YOU CURIOUS 

OR ARE YOU AN 

ABOUT YOUR 

INTELLECTUAL 

INTELLECTUAL 

PROPERTY 

PROPERTY? 

PROFESSIONAL? 

© 

© 

o o 



@ ACAPO 


SERVICES INDUSTRIES ABOUT UPDATES 


Photo credit: Acapo 


Not every flat site needs to have cartoons or goofy humor. This 
intellectual property law firm uses pastel colors, a minimalist 
design, and an easy-to-read font to demonstrate their profession¬ 
alism but also their warmth. 
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19. Liberio 



Photo credit: Liberio 


Liberio is another textbook flat design site, from the bright colors, 
to the modest font (except for the company name), to the smooth 
and overly simplified image of a tablet. 

20. Kaipoche 



Photo credit: Kaipoche 


The warm colors and cartoonish style really complement the fun 
vibes of this scroll-animated site for a kite-flying festival. 
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21. Team Treehouse 


treehouse 


Fsatures Stories Pricing Sign in Free trial 


Get your group on board 

Hundreds of businesses, schools and community organizations use 
Treehouse for Groups to fuel their successful training programs and keep 
their workforce Sharp. 



Photo credit: Team Treehouse 

Leaning more towards the old-fashioned interpretation of flat 
design, Team Treehouse shows off the increased detailing of 2.0 
in its modern icons. 

22. SCEATT 



Photo credit: SCEATT 

You may not usually see financial sites adopt such a light-hearted 
style, but both SCEATT’s casual tone and marketing as an easy- 
to-use app make flat an appropriate choice. 
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23. Evolve Wealth 


© evolve wealth. 


services our company mews mews 


h login 


SMART IDEAS 
FOR YOUR MONEY 


ill 


Professional financial advisers, 
helping you secure your financial 
future 



Photo credit: Evolve Wealth 


As with SCEATT above, Evolve Wealth sets itself apart from other 
financial companies with the warm atmosphere and humor of 
flat design. 


24. Black Tomato 



Photo credit: Black Tomato 


Another site that combines photography and graphics, the two images 
on Black Tomato’s home page play off each other - the contrast of a 
gorgeous, HD photo and heavily stylized, cartoonish graphics accent 
the best points of both. 
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25. Lander 



Photo credit: Lander 


The graphic on the bottom of Lander’s page demonstrates the 
modern take on flat design. While retaining the blocky style, the 
level of detail is stepped up, as is evident by the etchings on the 
pad, the glare off the photos, and the shading on the crumbled 
paper. 
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Additional Sites 

1. Studio Neat 


© Studio Neat 



- — WHAT WE MAKE -- 

ItfWcrJff-o nnq! ,TU*n ■ifv&i.j-lr pHthe profW4 * Vfri *(hj icf(v. W? -thiAt (fctfm uiFh fUJir 

iwca-jH’ vr want A«q to tziit it the world, and wo hopt/oti tike thorn too. 



Photo credit: Studio Neat 


2. Nebia 



N*i3 «J*3n «t in d($»$n ?IV3 !$ cm*^ j becwjr tmjwQr eqwltnt* :h»t KtuMy M'f'W yQv rheutt>Kte t)t 

gallons- of ™tw a year. With those savings, Mebto pays, for ilsetf *n about a year. 


Sbowenng ust became somcffiing you can whoidheartediy enjoy. 


Feel Good Feeling Good 

with 70% water savings 


Photo credit: http://nebia.com/ 
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3. Virgin America 




V rpi AtpiIem Lc 


Flying With Us 

Wn ma umpsiiiRWrit »itll rAirjftliiiiy JfW» Hlfci t KWrl Wt 0=1- 

fflMJ? OttCk Taa* Qitn 4 V Mi«*Fy *16 Itaiiem? Qw* t*t6 CWtk 


CABINS 

pan CiWT- I'M C-#bh Ectcol -rat Class. 



Photo credit: Virgin America 


4. Uber 



«vwyct*y -an tw m». 

ert:*r. #nd ch*#p#^ tffwtri« lax-, 

-JbcrX TAXI ALACK SUV LUX 


Photo credit: Uber 
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5. Lix Pen 



Photo credit: Lix Pen 


6. Headspace 



Photo credit: Headspace 


The new flat design is a welcome new style, bringing more options to 
what designers can do, without sacrificing the delightful character¬ 
istics that made flat design popular to begin with. We look forward 
to seeing how flat evolves in the future. 
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Building Flat Websites in UXPin 


As a collaborative prototyping tool, UXPin includes more than 900 
pre-built elements for you to quickly mock up your work before 
spending precious time in code or Photoshop or Sketch. Most of the 
elements are flat by default: no gradients, no textures, no extra bevels 
or embossing. But a few take the next step. 


o 

o 

o 


Heads up! This alert needs your attention, x 

but ill's not super important 


B 


Dargei Sjcco^s 


Profile Messages © 


2 3 4 5 


O O 


11 


Panel success 


Photo credit: UXPin 


It’s hard to go much more flat than UXPin’s Bootstrap Material library, 
samples of which are pictured above. The colored parts of these el¬ 
ements are editable - that is, you can change their hues and values 
to suit your needs, right down to making them grayscale. 



The aptly-named Flat UI library exchanges saturation for complexi¬ 
ty, using a basic shapes - circles, rectangles and triangles - to create 
entire components as seen in Ryan Allen’s “Flat 2.0” look. 
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And, of course, you can imagine and build your own flat 2.0 widgets 
with UXPin’s basic shapes. It’s all about adding detail rather than sim¬ 
ply reducing colors. Bigger, better, and more intricate: flat is evolving. 


25 Modern Sites 
With Brilliant Typography 


While not as flashy as an HD photograph or the motion of animation, 
typography is nonetheless an integral part of any design. 

Its effects can be subtle to draw attention to other elements on the 
screen, or they can be boisterous to make the message of the words 
dominant. In either case, one thing's for sure - typography enhances 
the design as a whole, one way or another. 



Photo credit: “Nike laces.” Alan Kim. Creative Commons. 
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The current trend in typography today is dramatic typography - type¬ 
face that draws attention rather than hides from it. This coincides 
with both the flat design and minimalism trends, whose simplistic 
layouts call for an extra boost to add excitement. The simpler the 
layout, the more typography affects over the site’s mood and the 
screen’s visual hierarchy. 

Before we get into examples, let’s dissect the fabric of typography 
into individual elements: 

• Category - This typically refers to serif and sans serif A “serif” is 
the superfluous little flag on the end of certain letter lines, and 
“sans” means “without.” 

• Stroke - A typeface’s stroke is the width of the actual line. Bold¬ 
ing a typeface gives it a thicker stroke, and is a good way to add 
emphasis to a word. 

• Size - The size of your typography will have an enormous impact 
on how it fits alongside the other elements on the screen. Naturally, 
bigger text will steal attention, while smaller text will fall more 
in the background. 

• Color - The color of text influences its message, for example, a red 
word will appear more urgent and grab more attention. Further¬ 
more, if a word’s color contrasts the background or surrounding 
colors, it will stand out more. 

• Spacing - The spacing between letters, words, and lines is most 
important for legibility, although designers can play with it to take 
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advantage of negative space - more space between words gives 
more emphasis, and can add a sense of elegance. 

With these fundamentals in mind, take a look at the 21 sites that show 
how typography enhances design. 

For a more thorough analysis of modern typography, as well as 9 
other current web trends, download the free ebook Web UI Design 
Trends 2015 & 2016. You’ll find 166 handpicked examples and 100 
curated resources to simplify your design process. 

1. Pack 


Do you have a dog? 


NO M YES 


© 

PACK 


Photo credit: °ock 


Typography should always reflect content. Pack’s plain font is 
friendly and inviting, which makes a lot of sense for a site that ca¬ 
ters to dog owners. Because the question is the focal point of the 
page, its size is bigger. Moreover, the background photo stays in the 
background with a slight fade that contrasts the white of the text. 
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2. Wikipedia 

As one of the most popular sites on the internet, and one that 
relies heavily on textual content, Wikipedia pays close attention 
to its typography. It’s not the most visually striking interface, but 
the unassuming typography and stripped-down interface does a 
great job at promoting findability and readability. 


WlKlPEDlA 


English 

The 1 Free Entycftswdw 
4 *aw»i 
Deutach 

i 

PyfiEKHS 


Espanot 

■ i« aoei Mikvm 

aim 

Francois 

L'itXyietepMfa Mto 
1 Mttox-eww 
Pel «ki 

UfoAjs Dnc/Wopod u 

I l»OK»l hurt 




Photo credit: Wikipedia 


On the home page (above), notice how each language selection 
has it’s own individual differences in size, color, and style to dif¬ 
ferentiate the title, description, and number of articles, in order 
of importance. 


McLaren Pi 

Frtrfi ENS tfH 


TT» JflcL»rtm Pi saImriadpoducun &!uQ-m hybrid sponscac by British wlHnothumanuriaouw MeLaran Aufflirafra. Ttw concept <m ctePuicdante 201 ?ParrsMotor Stewi* Datoirinto mi cusiwa bejan In 
*m UKinOci(!b»r2i3l3-.l 5 -l Theonaro Pi pfoaidipfi cl jT J unit wait -tod by A rack-cnly wwuwi ol rt» Pi, rtio UcLuen Pi OTB, iraeritd j.i ik* 331 i tWwwj. Mote Sto*. Ph? duc&H o'™ 

wil bn liinflnd Id 35 Mint? and only Bn J 7 S McLaron P i !*« w* t* rriTtpJ to byy-tme.^ 

H * MrMflwa is be ih* iwgawMM e osemoef is Be MeUf mi FI. uttong hyMS p*w e«a Fomele 1 r«tv»issy. H oem r #i have Be setra B>a* »« leyoui ea nt jtriMsww. rut be w a* the beeokapns 4 wy 
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Photo credit: Wikipedia 





25 Modern Sites With Brilliant Typography 97 


Once you arrive at an actual page, notice how the well-balanced 
line space (also known as leading) makes the content easy to 
browse and read. An otherwise text-heavy interface becomes 
extremely usable. 


3. Sendamessage.to 


RESPECT 



made by WILD in Vienna 


Photo credit: Sendamessage.to 


Sendamessage.to emphasizes the text of its message (the website 
is for sending such messages) with the most effective strategies: 
bold strokes, contrasting against the background, all caps, and 
superimposing it over the image. 


4. Mikiya Kobayashi 

Mikiya Kobayashi takes a different approach than Sendamessage. 
to. The small size of the brand name lends attention to other, more 
important elements, in this case the product picture behind it. 
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MIKIYA K O B 


. / //, * 

///j /Jll 

!;? ////;' 

// / / / 

/ i j / S //; 


Photo credit: Mikiya Kobayashi via awwwards 


Notice that the text is still bold, all caps, and contrasted against 
the background - as the brand name, it still wants some attention, 
despite its size. 


Anja Rubik 



EXCLUSIVE COLLECTION 


I I I B 


Photo credit: Anja Rubik via awwwards 


The site for Anja Rubik knows that typography is a great medium 
for adding creativity and personality to your site - as long as it’s 
still legible. They’ve superimposed the type over an image of a 
model, but there’s enough negative space around the person so 
that the letters aren’t drowned out. 
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6. Maaemo 


Book a table 


MAEMQ 


Photo credit: Maaemo via awwwards 

The customized “AA” for Maaemo’s site both promotes the brand 
and has a nice aesthetic to it. Every letter has its own creative 
spin, and the thin strokes enhance the elegance that the mini¬ 
malist composition started. 


7. Vintage Hope 



Photo credit: Vintage Hope via awwwards 


It’s hard to compete with a picture of a smiling child, so Vintage 
Hope steps up its typography to something more attention-wor¬ 
thy. Notice the use of all caps throughout. 
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Of course, decorative fonts make a lot more sense for clothing 
brands. Be very careful when deciding if you’ll use a decorative 
font since they normally should be restricted to headlines. As 
a collaborative design app, we ourselves veered far away from 
fancy typefaces (you can see on our tour page) since the clean 
aesthetic makes more sense to our audience. 

8. Float 



Photo credit: Float via awwwards 


The main element of Float’s landing page is its brand name, scrolled 
in an elaborate font, which works together with the background 
picture to create a memorable image. 
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9. Pop-Up Magazine 



Photo credit: Pop-Up Magazine 

Pop-Up Magazine - which isn’t a magazine at all, but rather a 
magazine-themed live show - uses color, italics, and size to mimic 
and (even modernize) the typography of traditional print media. 
Notice the unsettling but catchy effect of the title’s edge merging 
with the image’s edge. 

10. The Nation 


Nation. 


World Economy Culture Tala? Action 


Current Iiuk- Subscribe fi 


Black Love 
Matters 

A dispatch from the tooi^urd git he ring 
of a proudly diffusa, rapidly growing 
hyper local mure/nevil /or ktacJt Jews, 

MARK Milh-ETDM ERI Ff ITK 



How the 20WJ Election in 
Flniidj Led In a New Wave nf 
Voter Disenfranchisement 


The Kcpublimu Hare Uccn 
Trumped; Democrats Can 
Organize Better Debates 


Why I'm Going to Miss Jon 
Stewart 

A'lif iiiiH- hdJ nt MUirb the COP dkun 


Photo credit: The Nation 


Mirroring print media, The Nation uses bold, italics, colors, and 
size to separate article titles, authors, descriptions, and categories. 
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11. Royal Drawing School 


§ ROYAL 
I DRAWING 
SCHOOL 


Bl&fc Irjlcrnaliunal SuJtolHiJ IT.:-;-k a mars? 5 
Stifth Ck 



Photo credit: Royal Drawing School 


The innovative font of their slogan establishes the Royal Drawing 
School as an artistic institution. Notice how the italics in the ghost 
buttons set them apart from roman links in the top navigation bar. 


12. Mister French 



Photo credit: Mister French 


The clothing line Mister French has fun with typography, as you 
can see by the alternating serif and sans serif text, and the viva¬ 
cious logo. 
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13. Cienne NY 



Photo credit: Cienne NY via awwwards 


The simple and mainly lower-cased sans-serif typeface comple¬ 
ments the site’s minimalist design and puts focus (usually) on 
the photography. 

14. Le Printemps du Polar: La Femme Fatale 



Photo credit: Le Printemps du Polar: La Femme Fatale via awwwards 


The stylistic font works in conjunction with the picture to create 
a noirish mood, and remains unchanged when it’s resized for 
different breakpoints. 
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15. Sassi Holford 



Photo credit: Sassi Holforc via awwwards 

Sassi Holford’s use of white, and gray - not black - against white 
backgrounds, furthers the elegants identity of the wedding pho¬ 
tograph. 

16. Tomas Bata University in Zlin 


Jj Twui Bald. UnrrtisriT-m Sin 


. 1 II 

iJkCBLTUt - 


4 

ft 



li 

w 


WHAT 

IS Y 0 

STAR! WIEL WOT MAKE THE 

□ R 

COKTIXVI 

F □ T 0 R E ? 

rOti. ¥OU DO ITI 



Photo credit: Tomas Bata University in Zlin 


The bizarre font for the heading of the Tomas Bata University’s 
home page enhances the mysterious future-predicting theme, but 
the site switches to something more legible for the important links. 
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17. Thankful 


THANKFUL 


FIND A MEGlStfiY GIFT Guide SlGNUP LOG It 


AMAZING GIFTS YOU'LL LOVE FROM THE 


PEO 


D 





LOVE 


START YOU R FREE TRIAL 
fp.EL congrafitlctioriEJ) 



Photo credit: Thankful 


The line strokes of the superimposed title share - rather than 
steal - the photograph’s attention. 


18. Aquatilis Expedition 


THREE YEARS, ONE TEAM. 

A WORLD OF OCEANS TO EXPLORE. 

At 300 feel beneath the surface, the ocean Is dark. There are no 
landmarks around, you are suspended. Look hard enough arid they appear: 
translucent creatures filled with colour. Some are as tiny as the nail on your 
finger, others are the size of a building. These are gelata - unstudied, 
mysterious and omnipresent. They are the ocean's unseen backbone. 


Photo credit: Aquatilis Expedition 

Aquatilis Expedition wildly varies the use of its typography, with 
a customized brand logo, loud header, and colored body content 
that makes full use of the black background. 
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19. Two Arms Inc. 

0TWQ ARMS INC SHOP WORK ABOUT BLQO EVERYDAY 



Photo credit: Two Arms Inc. 

Aside from using interesting typography in general, Two Arms 
Inc. uses an old comic book trick to make the words “never run” 
visually suggest running. 

20. Drexel University: Get Going 



Photo credit: Drexel University: Get Going 

We’ll end with Drexel University, whose typography seems simple 
but actually works on different levels. The site uses both the text’s 
size and composition to create a visual hierarchy, gently guiding 
the user’s eyes through the words and onto the call-to-action. 
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Additional Sites 

1. Fight 4 Pride 


FIGHT PRIDE 

firfHTi f tin* ltd Mini, rffljT ui ttHmxtiH ufixjJ; 


mm ' v 

— F4P 


a 


CHAMPIONSHIP 3 


EH 



a 


Photo credit: Fight 4 Pride via awwwards 


2. Slack 



The funny thing is, it actually works. 


Photo credit: Slack 






25 Modern Sites With Brilliant Typography 108 


Master Dynamic 


IVMBT1R A. DYNAMIC H«0rH*HEJ AC CET-bWEIE 1 rniLCRWHT BLQQ 

The Modern Thinking Cap 


MH40 


0u- MhflC'Ove- far hearijJwifcs. #• e denned ta be -nwlpri» Ihinfcing caps.. 



Photo credit: Master Dynamic via Site Inspire 


Aquatilis 



Photo credit: Aquatilis via awwwards 
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5. Elevate 


0 

ELEVATE 



Photo credit: Elevate 


Since vision is our dominant sense, how a word looks is just as im¬ 
pactful as what it means. It might seem easy to neglect typography 
in favor of gorgeous background images or flashy animations, but 
doing so is neglecting an advantageous opportunity. 
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Design Tips: Changing Typefaces in UXPin 


The options palette in UXPin lets you select which typeface to apply 
to a block of text. Select one or more words, tap the “A” icon, and 
choose a typeface, different sizes, leading, color, style and alignment. 
You can also add a hyperlink to another page or web URL. 



Hello world "1 


COLOR BtrCOLQfl 



STVLf 


| i | i f y | * 

ALIGN 


LINK 



You can choose from more than 90 typefaces including: 


Mel 

Crafty Qiits 

Slat 

AUerU 

Ct:iitj3ci T’fsl 

irTltr Apr ft*. Htft 

Amaranth 

cmstieo 

Krton 

HJUiUK 

Cuprum 

Lato 

Alton 

fh>n(SfUflf 


At imp 

6X0 

tphaflff Tu» 

Asap 

Fja II a Q ne 

Lora 

Bitter 

Francais One 

UKKICSTWt 

I3lack Ops Qnc 

Frsdoka Ona 

Man:* Script 

Brft; Serif 

Gaudy Bookletter 1911 

Hantfl 

Cabin 

tipple-' 

Haven Pro 

Cabin Condensed 

Ineonsolata 

Memweatlier 

Cttfigrxffttti 

yxift Fiawtr 

Mctamorphovs 

Copse 

Istck Web 

Molengo 

{■mrert Tbur <&rtep 

lo j*fin Jons 

Montserrat 


Myli 

PTSens Caption 

Special Elite 

New*. Cycle 

PI Sans Narrow 

StLuuda Dim 

Nobile 

PT Serif 

syncopare 

Nunito 

Qnt*H;1ri«il 

’Aw™ 

Old Standard TT 

QyiC ksn nri 

Titillium Web 

Open Sens 

RaLeway 

i he- &i,rl Next Brer 

Ope- ft Sans Condensed 


U bunt li 

□maid 

Righteous 

Ubunt u Condensed 

Oxygen 

Rflborn 

Ut^tnpt 


Fotrolo Condensed 

Vollkorn 

Payton*: One 


Walter TuRNluat 

P£iMAti£fJT MA£K££ 

EjakkUt 

Tformne Kaffceatr 

Philcxs-ophror 

Into li^tI 

Adal 

Play 

Signlka 

ChIUNI'C N.W 

PT Suns 

Source Sarvs Pro 

Georg Lb 


Tafioma 

Tinier N^Wi Ki iiujii 

Trebuehct MS 


Go ahead and start a free tria] to play around with the typefaces. 






22 Sites With Beautifully 
Vibrant Colors 


We’re not in Kansas, anymore. The landscape of modern web design 
is full of bright, vibrant colors that can either replace or enhance the 
stoic black-and-white schemes. 



Photo credit: Dragone via awwwards 


This is no coincidence. The current popularity of vibrant colors is the 
result of other trends. For one, Retina and other HD displays offer 
more pixels per inch, which means designers aren’t limited to 216 
web safe colors and now have access to millions. 
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These technological advances allowed vibrant colors and flat design 
2.0 to gain momentum - the two go hand-in-hand, with bright, happy 
colors to enrich the visual maturity of flat design. The prevalence of 
minimalism, too, promotes vibrant colors: with few visuals to work 
with, color becomes one of the most powerful visual design tools. 

But it’s not as easy as turning your site into a paint spill. Modern de¬ 
signers have paved the way for several beneficial strategies that are 
themselves smaller trends within this greater trend: 

• Monochromatic schemes - Because vibrant colors are atten¬ 
tion-grabbing, if you have too many on the same page they will 
compete with each other. A monochromatic scheme, using varying 
shades of the same color, eliminates this problem. 

• Accents - Using bright colors for a single button or even a word 
will draw attention to it, especially against a background of more 
bland colors. 

• Texture - While riskier with bright colors than neutral ones, the 
addition of texture can improve the use of color when done right. 

• Navigation - Both to distinguish tabs and sections of a long-scroll¬ 
ing page, colors are a shortcut to differentiating pages. 

Below we’ve collected our favorite modern websites that use vibrant 
colors well. 
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1. Tumblr 




£ ft 


o 

Q 

O 

O 


^ 

Trotl Fholo _ Quote Link 


Seriously, pul anything you 
want here. 

Seven posl types to gel you started. Your brain can do the rest. This thing is yours-. 
Use it however you like. 


Photo credit: https://www.tumblr.com/ 


Internet goliath Tumblr stays current with the vibrant backgrounds 
of its explanation pages. Not only do the happy colors set the right 
atmosphere for the entertaining social site, they also provide the 
appropriate divisions between each page and its central concept. 
















22 Sites With Beautifully Vibrant Colors 114 


2. Bose 



Photo credit: http://special.bose.eu/en/via awwwards 



Photo credit: http://special.bose.eu/en/via awwwards 


The colorful site for Bose’s product line adds an energy and the 
suggestion of fun with using their headphones, furthered by the 
slanted divides. The diversity in color, along with the cropping of 
the photos, allows the site to ignore border lines between images. 
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3. Joyride Taco House 



Photo credit: http://joyridetacohouse.com/ 


The horizontal baby blue lines contrast with the red-orange back¬ 
ground to create a nice push-pull effect for generating attention. 
Moreover, Joyride uses some nice texturing and shadow effects 
to give the site a unique appearance. 

4. Line Equality 


JjUlL *»*Uf - CGufAtT 

& Q 

QVC + MUPPETS 


Photo credit: http://www.linequality.eom/#qvcmuppets via awwwards 

Line Equality demonstrates the monochromatic scheme described 
above. A color like lime green is hard to mix with others, so it 
makes sense to keep it alone. Like Tumblr, this site also uses 
brightly colored backgrounds to distinguish scrollable pages. 









22 Sites With Beautifully Vibrant Colors 116 


5. Mijlo Essentials 


M 


ESSENTIALS 


THE MIJLO BAG 


Style + wiiLaijiiibiLiLy Lniomi die design uf cui simple, Lvu-frieiwlLy baL-tp auk , 
because tm/c believe that if you're to buy a backpack, you shoutd only buy 
tnwj. 

To help Kliie«e our ^onlppfc-dtiJa a twg, on Kkkstiiriti Jos $39 aw. 


H turn ui wrw* 


Photo credit: http://essentials.mijlo.com/via awwwards 


Spp*W,B,gl Q 13 S 

WUI.O inched wwtwi«ti*sv *>& 9 W4l» cvftlt * 

mwnliril rWrti - »hlli uir td'/EdC ■ rfjfcr tkid lo be as (hi el cm d* (lie bay Lhrjf 

panfce-d it in. 

Oi«fe 9i«i t tflkw Hid wiJLy’t 

W KickuMK* 


M 



Photo credit: http://essentials.mijlo.com/via awwwards 


The product page for Essential’s Mijlo bag proves that the use of vi¬ 
brant colors doesn’t always have to be grandiose. It can work just as 
effectively - sometimes moreso - when applied subtly. The subdued 
colors of the background, text, and product picture itself ensure the 
user’s eyes will fall on the brand logo and call-to-action. 
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6. Zample 


ZAMPLE +me ASX a quESTUMi 

do you floss every day 

0-0 

A (0 # 


Photo credit: http://zample.me/do-you-floss-every-day via awwwards 


Do you use Google+ ? 

QuO 

a © • 


Photo credit: http://zample.me/do-you-floss-every-day via awwwards 


Zample is worth mentioning because it tries something new with 
its monochromatic scheme: a gradient effect is added to create a 
more pleasing background than a stagnant single color. 
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7. Crop Trust Annual Report 



Photo credit: https://www.croptrust.org/2014/key-figures/via awwwards 



’'Conserving crop diversity is the first and most 
crucial step to ensuring food security." 


"We need partners of every size, in eve ry country, 
with genuine love for every crop that we protect . 11 


Photo credit: https://www.croptrust.org/2014/key-figures/via awwwards 


With all due respect to Crop Trust, statistics on agriculture are 
not the most stimulating subject matter for a site. Perhaps to off¬ 
set this, they added an playfulness by using fun colors for their 
card backgrounds. 
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8. Focus Lab LLC 


O 

BRAND. 

WEB. 

Ul. 


wist ootLsroay pimwAi let^tauc 




Unde; atie louf 


Photo credit: http://focuslabllc.com/via awwwards 



Photo credit: http://focuslabllc.com/via awwwards 

Focus Lab LLC shows how basic photo overlays can alter the 
interpretation of pictures. Adding a red tint, for example, gives 
this background image more energy, not to mention promotes 
brand identity with their signature color. 
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9. lOandThree 



Photo credit: http://10andthree.com/piping-live/ 



Photo credit: http://10andthree.com/piping-live/ 


Vibrant colors don’t always need to be fabricated in an graph¬ 
ic. The site of lOandThree, known for its photography, uses the 
brightly colored subject matter of real-life photography for the 
same effect. 
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10. Apps 


, squeeze, pour 


Pye 


It's an action-simulator far cider making. 

You need to make refreshing ckine from some apples. 
Pay attention and be .decisive 





r 


Mr 


Photo credit: http://apps.ua/en 



Photo credit: http://apps.ua/en 


Apps is another site that uses the monochromatic scheme to ac¬ 
company a color that’s otherwise difficult to match. 
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11. Frankensim 



Photo credit: http://animade.tv/frankensim/ 



The game-like frankenSim furthers the enjoyment factor of mak¬ 
ing an app monster with its interesting color choices. 
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12. Red Bull Music Academy Daily 



Photo credit: http://daily.redbullmusicacademy.com/ 


Before Motown: A 
History of Jazz and 
Blues in Detroit 


Auguu T. J'-H 
Ey ftihlfn AlufynkU 


When I got to Detroit, Hastings Street was the best street in town. 
— Blind Blake, “Hastings Street" 

Young fieicr GordyV Id mitt hangout bo lang.trtsiiu._Gld I £uungi Strtw 
ihr Hvtljf cpocmitr td W*ck Rwiwri.a Onroic culturel »ith 

i iPtwind •miitir Irvy tkik hunrd hrnoath ihf onnrrrfr and i«phdH ntf*rf«- I- 
1J( tlif jilfcr Frtewj.jf. M iLa twilit, (HJ H-u:uip wju iltrt Hvvilwi 

Simr hi ihfcjiir, with fat jpJ h3urt iifurijF ftvriy teaurr. Ayr 

rhe- Paul w« i«d b«w«n t^ps and 1911. and find wvtf i3 wart liner OnN 
a imall h retch vu rpuied. tad n's f^i+aiclv dotted tilth niootlj- raci&r 


UME3 I 


BLIND BLAKE 


Complne Rrc^rded Worts 
In Ch-rcHwIojtiuMl Order 


Photo credit: http://daily.redbullmusicacademy.com/ 


In addition to using colors well throughout the site, Red Bull Music 
Academy Daily takes advantage of contrast with their typography, 
creating an edgy look appropriate for a music-related site. 
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13. TW05SIX 2015 



Photo credit: http://2015.two5six.com/ 



Originally a 19th Century textiles warehouse, Villain is an amazing 
venue located in Williamsburg, one of the most vibrant and eclectic 
neighborhoods in Brooklyn. Villain is located at 50 North 5rd Street, 
a ten-minute walk from several subway lines end a five-minute subway 
to Manhattan. Both southern Manhattan and downtown Brooklyn are home 
to many affordable boutique hotels. 


Photo credit: http://2015.two5six.com/ 

Another site that uses color in typography well is TW05SIX. Not 
only do the vibrant colors in the title make them the dominant 
feature, an animated effect keeps them always changing. 
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14. Solo 



IAaE A IBJa U> 

- 


Freelancing^ tough.. 
Luckily you've just 

—■ 

■ 

found your wingmaEu 

@ © 03 # H 

V 

4C 

■ Bll "■ 


Solo's a great aesietant and ^ 

an elegant way to ensure 
your fi'eel&nee projects run 
enmootbiy. 

1 ® 

0 


Photo credit: http://thrivesolo.com/ 



«« 


Starting from only $13, 

—— 

two great price plans, 

one amazing freelance tool 

@ © IS E3 

MOMThLY yearly 

OTHER BENEFIT? 




mww 



rmHfcwri 

i-rrttaVTl. 



TllWl 

- -I—- 1 - 

tin** F»ES FWt 

_sjja_«i_an_ 

FREE TRIAL 


Photo credit: http://thrivesolo.com/ 


Reversing the strategy of brightly colored accents against neutral 
backgrounds, the bright blue Solo background makes the other¬ 
wise bland white seem to pop. 
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15. The Verge 



m s*lf LDHGFDHH REVIEWS VIDEO 

TECH SCIENCE EMTERTAIKIMEMT OS& DESIGN U3AW0ALD f DRUMS Q, 

The 

How ' 90 s graphics shaped the 

Everything you say and do is 

bleak future of Deus Ex 

public five rules for living 

mind-bending 

DyWFtebrae 31 

with the internet 

4 aitaFto* 

messiness of the 



Ashley Madison 

VAlQ is coming back to the 

USA 


data dump 

The controversial 

By Gwy klnran * 

Otf J3TMUmn a 

quest to stop 



climate change by 
pulling carbon out 

I wrote an awesome Hitman 

OnePlus 2 review 

of the air 

movie because nobody else 
can. apparently 

Rv ftfw, tarcgi 14 


Ft, rr.;»ft*n*.n 


Photo credit: http://www.theverge.com/ 



■ rnriiG«» 


The Ashley Madison hack: 
everything yon need to 
know 

•iMcat. Hulnmhii | Aujjjf 1H. W !. It? !J1 pn 



Au attark rm AiNny Wjqecti - [h* juUI dating hi 
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How '90s graphics shaped 
the bleak future of Deus Ex 



Swarm is now giving people 
virtual coins they can t 
spend 

JMW. KMlWUlMa I VffJP 23 . XU (MM Hii 
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The controversial quest to 
stop climate change by 
pulling carbon out of the air 
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WeelCy Qltlqus Thread: August l? - 
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Bear Mounted rbigerprint Headera 
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*$ 
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Q 

No, Apple Music [j Nat Doomed 


How Afropunk became a 
full-blown movement 

Kicked Sljjr | ?OI Vbl 4H pin 



Photo credit: http://www.theverge.com/ 


Last, we have popular news venue The Verge, which combines an 
assortment of color techniques to create its tell-tale look. Using 
gradients, photo overlays, card-sectioning, and or course vibrant 
colors, the site creates an aesthetic that is easily recognizable as 
its own. 
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Additional Sites 

1. De Broc 



Photo credit: DeBroc via Siteinspire 


2. Fitbit 




Photo credit: Fitbit 
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3. splitsecnd 




Photo credit: splitsecnd via Sitelnspire 


4. Shaker Brand 



Photo credit: Shaker Brand via awwwards 
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5. Haruki Murakami 



Photo credit: Haruki Murakami via awwwards 


6. Neemble 
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Photo credit: Neemble via CSS Design Awards 
























22 Sites With Beautifully Vibrant Colors 130 


7. Nest 


See your home. 
Away from home. 
Meet Nest Cam® 


BUY NOW 



The smoke alarm other alarms look up to. 

Mast Msst Protect > 



Photo credit: Nest 


8. Evernote 
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Photo credit: Evernote 
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The trend of bright colors may fade, perhaps in favor of more solemn 
or professional color schemes, but some attributes of the current 
trend will never go out of style. 

Colors can always be used to section off areas, whether cards, pages, 
or sections of a long scroll. While they may not always be this pop¬ 
ular, bright colors will still be used - even if limited to more jovial 
sites - and when they are, monochromatic schemes will be typical. 
Finally, photo overlays can help influence the site’s atmosphere, no 
matter if they color is vibrant or not. 
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Design tips: Picking vibrant colors in UXPin 

You can add vibrant colors to your own prototypes in UXPin with a few 
simple steps. Practically every element, including text, buttons and 
plain boxes, support background color with the built-in color picker. 



The color picker offers more than just a hue/saturation block. You 
can also view: 

1. Your saved favorites, analogous to bookmarks 

2. A list of recently used colors 

3. Popular colors and values 

4. Preset gradients 

5. Color schemes 
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With its ability to manage as well as choose hues and values, the color 
palette is a powerful :ool in UXPin not just for picking vibrant colors, 
but for managing colors across your entire project. 


22 Excellent Sites 
with Long Scrolling 


The smaller the screen, the longer the scroll. 


That truism explains the rise of the long scrolling: with mobile browsing 
overtaking desk browsing in 2014, the popularity of small screens has 
urged designers to rethink their outdated “above the fold” mentality. 



Photo credit: https://www.facebook.com/ 
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Long-scrolling creates plenty of new opportunities for storytelling, 
navigation, creative visuals, and a more immersive overall experi¬ 
ence. As a result, we find several common techniques and strategies 
start to emerge: 

• Parallax Graphics - Borrowed from the video game industry, this 
strategy of moving the backgrounds at different speeds creates 
a 3D effect and stimulating visuals that are more enjoyable to 
interact with. 

• Screens as Pages - An important way to organize information on 
a single page, differentiating concepts into screen-sized sections, 
usually by changing the background, makes sites more cohesive. 

• Sticky Navigation - One of the biggest drawbacks of long scroll¬ 
ing is disorienting the user, so having a navigation system that 
always stays in the same place on the screen gives users control 
and security to prevent getting lost. 

• Animated Interactivity - Scroll-triggered animations add a fun 
level of interactivity that engages the user to a point where they 
enjoy scrolling regardless of content. 

• Atypical Direction - Due to the recent trendiness of long scrolling, 
sites can set themselves apart by scrolling left, right, or upwards. 

• Indicators - Some users will not think to scroll on their own, so 
quick instructions like “scroll down” or another indicator avoids 
confusions - just be sure to distinguish these from other links or 
calls-to-action. 
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These are the techniques that made the sites below among the best 
examples of long-scrolling sites. 


1. Twitter 
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Photo credit: https://twitter.com/ 


One of the pioneers responsible for breaking the page-by-page 
mold, Twitter remains among the best and most-recognized 
long-scrolling sites today. This format allows the tweets to be 
arranged chronologically while still seeming new and fresh. 
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Photo credit: https://twitter.com/ 
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For social media sites and others with user-generated content, 
long scrolling is not just a trendy choice but a practical one. The 
neverending loading of new content from infinite scrolling allows 
otherwise chaotic content to be organized. 

Heart Kids NW 




Photo credit: http://www.heartkids.co.nz/ via Awwwards 


The New Zealand charity Heart Kids pulls out all the stops. The 
long-scrolling site combines animations (some scroll-activated), 






22 Excellent Sites with Long Scrolling 138 


stunning color usage, poignant imagery, and cursor interactivity 
to promote its life-saving message. Notice the unobtrusive “Scroll” 
icon and instruction on the landing screen, and the sticky call- 
to-action that always remains at the top. 

3. The Boat 
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Photo credit: http://www.sbs.com.au/theboat/ via Awwwards 


One of the most creative uses of long scrolling is SBS’s The Boat, 
something like an interactive novel. The continual animations 
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and clever use of motion and angles when new content appears 
draws the user/reader into an immersive experience that tradi¬ 
tional, stagnant scrolling sites can’t match. 


MCA Leicester: The Seven Types of Motorcycle Rider 


THE SEVEN TYPES OF 
MOTORCYCLE RIDER 



Photo credit: http://www.mcaleicester.co.uk/if-the-lid-fits/ 


This offshoot site for MCA Leicester demonstrates a smooth meth¬ 
od to indicate scrolling without actually scrolling. The grayed out 
helmets on the left side, stacked vertically, indicate (along with 
the title) that the user has only to scroll down to see more content. 



Photo credit: http://www.mcaleicester.co.uk/if-the-lid-fits/ 


An additional tactic is the clever animation that presents each 
new screen, making the site somewhat of a long-scrolling/page- 
by-page navigation hybrid. 
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Thirteen Reasons Why Your Brain Craves Infographics 


More accessible: 
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Photo credit: http://neomam.com/interactive/13reasons/ 


The natural style of long scrolling, where different sections and 
concepts are intrinsically united in a continual stream, makes 
them great for infographics. As Thirteen Reasons Why Your Brain 
Craves Infographics shows, the single page format allows de¬ 
signers to fluidly present heavy doses of information in smaller, 
digestible bits. 
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It only takes us 150ms for a symbol to 
be processed + 100ms to attach a 
_meaning to ft_ 


Photo credit: http://neomam.com/interactive/13reasons/ 


Moreover, scroll-activated animations, such as the eye that moves 
with the scroll as well as background animations, negate the some¬ 
times boring aspects of learning information. 


6. Junko’s Story: Surviving Hiroshima 



Photo credit: http://www.sbs.com.au/hiroshima/ 
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Another SBS site, Junko’s Story mixes the storytelling and info- 
graphic properties of long scrolling to tell survivor’s chilling story 
of surviving the Hiroshima blast. 
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Photo credit: http://www.sbs.com.au/hiroshima/ 

Due to the solemn nature, the site keeps a traditional format with 
plain text interspersed with graphics. However, the site retains a 
fresh and modern feel with scroll-activated images, such as the 
metal helmet above, that fade into view in the margins. These 
display telling artifacts and factual infographics about Hiroshi¬ 
ma - such as a map of the blast radius - which can be clicked for 
further details. 
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Beagle 



Photo credit: https://getbeagle.co/via Awwwards 


The site for Podio’s Beagle tool sets a page-by-page navigation to 
the long-scrolling format. 
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Photo credit: https://getbeagle.co/via Awwwards 
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Each point in its value proposition has its own screen/page, how¬ 
ever all are accessible through a linear scroll and are united by 
animations that carry user attention from one screen to the next, 
such as the piece of paper moving from the screen to screen above. 

8. Bowhead (Tails and Whales) 





Photo credit: http://bowhead.tailsandwhales.com/ 


Like Beagle above, Bowhead takes advantage of long scrolling to 
display its value proposition point-by-point - though for a single 
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product. The site uses animations like fades and slides to keep the 
content engaging. 

9. The Kings Arms 




LATEST NEWS 


UPCOMING EVENTS 


a 


Photo credit: http://thekingsarmslondon.co.uk/ 

Not all long scrolling sites have to be flashy. The London pub The 
Kings Arms uses simple background divisions with no fancy anima¬ 
tion transitions between screens. However, a parallax motion on the 
background phones and additional cursor animations (not to mention 
an aesthetic layout) keep the site from appearing dull. 
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10. Wall’s Ice Cream & Airpure Car Fresheners 
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* 


Photo credit: http://walls.airpure.eom/#split 

By contrast, the promotional site for the Wall’s Ice Cream and 
Airpure Car Fresheners collaboration is very flashy. Little more 
than images of the iconic popsicles, the long-scrolling site fea¬ 
tures entertaining animations between screens that make it 
worth browsing. Notice sticky navigation on the left site and the 
progress bar at the bottom (which changes colors). 
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11. Beatrate Band 




Photo credit: http://www.beatrate.org/en/ 


The long-scrolling site for the band Beatrate features a couple of 
experimental features for long scrolling, including autoplaying 
video and a horizontal image carousel. 
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12. Space Needle 



BUY TICKETS 



Photo credit: http://www.spoceneedle.com/home/ 


The Seattle Space Needle site is a perfect example of atypical 
scrolling direction. Under the pretense of traveling up the space 
needle (and beyond), it makes sense that users scroll up instead 
of down. 
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Additional Sites 

1. Keep 



2. The Reveal (Lexus) 
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Photo credit: http://www.lexus-int.com/magazine/issue5/reveal/ 
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3. One John St 



Photo credit: http://onejohnst.com/ 


4. One to See, One to Kill 



13 ONLY TRULY LIVED WITH YOUR 
ACCEPTANCE OF DEATH. 


l wu never ill right with dying. 
Some prayed. It didn't work for me, but I 


Photo credit: Frames Collection 
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5. Cameo by Vimeo 


SMALL SCREEN, CINEMATIC RESULTS 
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Photo credit: Vimeo via Awwwards 


6. Squarespace 



Photo credit: Squarespace 
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7. YepApp 
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Photo credit: YepApp 


8. Beoplay 



Photo credit: Beoplay via Awwwards 
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9. Inbox by Google 



Photo credit: Inbox by Google 


10. Be Human by Reebok 



Photo credit: Reebok via Awwwards 


As the sites above prove, the most successful application of long 
scrolling is for its practical benefits, not to appear part of a trend. 


There are many useful advantages of long scrolling: unifying disorga¬ 
nized information, interactivity, navigational liberties, stunning visuals, 
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displaying extensive content (infinite scroll), linear storytelling, etc. 
However, given the drawbacks like disorientation and occasionally 
loading times, you shouldn’t recklessly switch over. Understand the 
best techniques to make the most out of it. 


Design Lesson: Delight Users When Elements Appear on 
Scroll 

UXPin comes with an action trigger that occurs when users scroll to 
a certain point. This is great for making elements appear as users 
explore an extra-long web page or app. Here’s how it works. 

1. Create an element whose top edge is about 500 pixels from the 
vertical ruler’s origin point. Remember to give the element a sensible 
name so we can refer to it later. 
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2. Add an action based on “scroll to” that shows the element. For best 
results, and to give users something to see in a timely manner, set 
the trigger to occur before they reach the element’s top edge. For ex¬ 
ample, we set this “scrolled to” value to 300px because the element’s 
top edge is at 500px, giving us a comfortable 200 pixel margin. If 
the element was at, say, 1200px, we’d set the “scrolled to” value to 
lOOOpx. If you set the element to appear at its height - such as 500px 
and 500px - users will tend to scroll right past it. 







3. Set the action to “toggle,” which will show/hide the element as 
users scroll past. 
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4. Hide the element (you can find it again with the Layers palette). 



5. UXPin lets you scroll to the bottommost element, so create anoth¬ 
er one further down the page. In this case, we created another box 
whose top edge was at 1000 pixels. 


Design better web experiences 








UXPin 


Everything you ever wanted 

in a UX Design Platform 


© Complete prototyping framework for web and mobile 
© Collaboration and feedback for any team size 
© Lo-fi to hi-fi design in a single tool 
© Integration with Photoshop and Sketch 


Start using it now! 


www.uxpin.com 





